JQuery，ScrollTop 滚动到最后一个 div 而不是 ID div答案

【问题标题】：JQuery, ScrollTop scrolls to last div and not ID divJQuery，ScrollTop 滚动到最后一个 div 而不是 ID div
【发布时间】：2010-11-16 20:43:09
【问题描述】：

所以我基本上使用一个链接来滚动浏览一系列 div 以选择正确的一个。即点击happy，然后滚动到'happy' div，

但是，滚动似乎没有转到其链接的内容，而是滚动到列表中的第三个 div。

代码如下：

<div id="portfoliowrapper">
        <div class="title">My Portfolio</div>
        <div class="row1"><a id="kazookilink" href="#">Kazooki</a></div>
        <div class="row1"><a id="uodlink" href="#">Universe of Downhill</a></div>
        <div class="row1"><a id="kudialink" href="#">Kudia</a></div>
    </div>
    <div id="description">
        <div id="top">description</div>
        <div id="kazooki">kazooki</div>
        <div id="uod">Universe of Downhill</div>
        <div id="kudia">kudia</div>
    </div>



 <script type="text/jscript">

      function goToByScroll(id){
      id = id.replace("link", "");    
      $("#description").animate({scrollTop: $("#"+id).offset().top},'slow');
      };

      $(".row1 > a").click(function(e) { 
        // Call the scroll function
      goToByScroll($(this).attr("id"));           
      });

 </script>

【问题讨论】：

标签： javascript jquery html scrolltop

【解决方案1】：

需要使用position()而不是offset()，还需要将#description设置为position:relative。

那么你需要考虑当前的scrollTop。

最后你需要取消默认的点击行为。

http://www.jsfiddle.net/gaby/TneA6/的完整示例

【讨论】：

【解决方案2】：

它可能只是滚动到页面的最底部——它无法将 div 的顶部与页面的顶部对齐，因为页面结束了。尝试在页面底部添加一堆空白区域（<div style='height: 1000px;"></div> 或其他内容），看看是否仍会导致意外行为。

【讨论】：

好的，我试过了。单击链接时仍会滚动到 div 的底部。然而现在当一个链接被重新点击时，它会向上滚动到第一个 div。

【解决方案3】：

我猜你需要防止点击的通常行为：

  $(".row1 > a").click(function(e) { 
        // prevent default behaviour
        e.preventDefault();
        // Call the scroll function
        goToByScroll($(this).attr("id"));           
  });

只是猜测。

【讨论】：

原来有这个，但没什么区别。刚刚尝试再次添加并测试，这没有任何区别。