2

所以我基本上使用一个链接,滚动浏览一系列 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>
4

3 回答 3

1

需要使用position()而不是,offset()还需要设置#descriptionposition:relative

然后你需要考虑当前的scrollTop.

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

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

于 2010-11-16T21:08:03.380 回答
0

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

于 2010-11-16T20:48:21.750 回答
0

我想你需要防止点击的通常行为:

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

不过只是猜测。

于 2010-11-16T20:51:53.370 回答