在文档中导航

Question

我正在做 'Navigation Within A Document' 事情，但我无法让它在网页中滑动。 Here you have a link to my blog。当您单击 'Staff' 时，link 会将您带到员工部分。但我希望它在网页中滑动并引导您进入该部分，就像滚动条一样。

有什么代码创意吗？

<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>

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

在文档中导航

Navigation Within A Document

html

css

jquery

blogger

menu