Question

所以我基本上使用一个链接，滚动一系列div来选择正确的一个。即点击快乐，滚动到'快乐'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>

Answer 1

需要使用position()代替offset()，还需要将#description设置为position:relative。

然后您需要考虑当前的scrollTop。

最后，您需要取消默认点击行为。

http://www.jsfiddle.net/gaby/TneA6/

的完整示例

Answer 2

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

Answer 3

我想你需要阻止点击的常见行为：

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

只是猜测。

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

3 个答案: