jQuery的scrollTop工作在一个片段，不在另一个在同一页

所以我有几个屏幕淡入淡出（步骤），我试图实现的是，当我们按下按钮上第一步它进入第二步顶部（它始终是包含所有ID的主DIV ID：enter-give-away-now），然后到第3和第4等。jQuery的scrollTop工作在一个片段，不在另一个在同一页

我面临一个奇怪的问题，而第一步正在工作（我们按下<a>标签中的一个，当前页面淡出，而页面滚动到顶部并显示新的步骤），而其他所有步骤都不起作用。他们淡入淡出，但赢得了' t滚动到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的事实，这只是为了说明我已经尝试了两者。

来源

2017-02-19 Ricardo

你可以改变这个

$("#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（）。

来源

2017-02-19 22:09:35 Yepo

你太棒了。非常感谢！ – Ricardo

jQuery的scrollTop工作在一个片段，不在另一个在同一页

回答

相关问题