Question

我正在进行＆＃39;在文档中导航＆＃39; 这件事，但我不能让它在网页上滑动。 Here you have a link to my blog。当您点击＆＃39;员工＆＃39;时，该链接会将您带到员工部分。但我希望它能够在网页中滑动并引导您进入该部分，就像滚动条一样。

任何代码创意？

<li><a href='#staff'>Staff</a></li>

<a name="staff"> The staff div would be here </a>

Answer 1

我认为这是你的答案：http://css-tricks.com/snippets/jquery/smooth-scrolling/

在此处查看演示：http://css-tricks.com/examples/SmoothPageScroll/

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

Answer 2

代码的问题是<a>元素。在你的博客中它起作用，因为staff容器有足够的高度来滚动到这个位置。

要像这样做你需要的效果：

<li><a href='#staff'>Staff</a></li>

<a name="staff" style="display: block; height: 1000px;"> The staff div would be here </a>

当然这是一个虚拟的例子，但它显示了为什么在你的例子中不起作用。

问候。

在文档中导航

2 个答案: