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在一个片段中工作，在另一个片段中不在另一个片段中

1 个答案: