jQuery scrollTop 在一个片段中有效，在同一页面的另一个片段中无效

Question

所以我有几个屏幕淡入和淡出（步骤），我想要实现的是，当我们在第一步按下按钮时，它会转到第二步顶部（这是总是主要的 DIV 包含所有 ID：enter-give-away-now) 然后是第 3 和第 4 等等..

第一步工作时我遇到了一个奇怪的问题（我们按下 <a> 标签之一，当前页面淡出，同时页面滚动到顶部并显示新步骤) 而所有其他步骤都不起作用。它们会淡化但不会滚动到 enter-give-away-now div 顶部。

<section class="section-second">
    <div class="container">
        <div id="enter-give-away-now" class="row phone-select-row">             
            <div class="step1 marker_show">
                <h1 style="padding: 0 4px 0 4px;"><span>Pick a color.</span>Choose your Color</h1>

                <div class="col-md-3 col-sm-6 next">
                    <a href="#enter-give-away-now" class="color-select-button color-select-button_4 scroll-me">
                        <img class="img-responsive img-color-select" src="img/4.png">
                        <span>White</span>
                    </a>
                </div>  
            </div>
            <!-- STEP 1 END -->

            <div class="step2 marker_show" style="display: none;">
                <h1 style="padding: 0 4px 0 4px;"><span>Title</h1>

                <div class="col-sm-4 next">

                    <a href="" id="scroll-me2" class="capacity-select-button color-select-capacity_1 scroll-me">
                        <span class="gb-amount">4<span class="gb-sign">GB</span></span>
                        <div class="capacity-info">
                            <span class="reg-price"><span class="price-label">Test builds left:</span> 3</span>
                            <span class="reg-price"><span class="price-label">Regular price:</span> 59,99$</span>
                            <span class="your-price"><span class="price-label">Your price:</span> 29,00$</span>
                        </div>  
                    </a>

                </div>
            </div>
            <!-- STEP 2 END -->
            </div>
            </div>
            </section>

Javascript:

$('.scroll-me').bind("click", function(e) {
    var target = $(this).attr("href"); // Get the target element
    var scrollToPosition = $(target).offset().top; // Position to scroll to
    $('html /* For FF & IE */,body /* For Chrome */').animate({
        'scrollTop': scrollToPosition
    }, 500, function(target) {
        window.location.hash = target;
    });
    e.preventDefault();
});

$("#scroll-me2").click(function() {
    $('html, body').animate({
        scrollTop: $("#container").offset().top
    }, 500);
});

如您所见，我已经尝试了 2 种方法（.scroll-me 在 STEP1 上工作得很好）。第 2/3/4 步有问题，我也尝试用其他代码 (#scroll-me2) 完成它，但没有成功。不要注意我同时拥有 .scroll-me 和 #scroll-me2 的事实，它只是为了说明我已经尝试了两者。

Answer 1

你能改变这个吗

$("#scroll-me2").click(function() {
$('html, body').animate({
    scrollTop: $("#container").offset().top
}, 500);

});

到此；

$("#enter-give-away-now").on('click', '#scroll-me2', function() {
$('html, body').animate({
    scrollTop: $("#container").offset().top
}, 500);

});

当您的 jquery 代码呈现时，id 为 #scroll-me2 的元素不会显示，这就是为什么您不能在那里使用 .click() 的原因。

jQuery scrollTop 在一个片段中有效，在同一页面的另一个片段中无效

jQuery scrollTop works in one snippet, doesn't in another at the same page

jquery

scrolltop