在文档中导航答案

【问题标题】：Navigation Within A Document在文档中导航
【发布时间】：2019-06-28 02:22:29
【问题描述】：

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

任何代码想法？

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

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

【问题讨论】：

你需要使用一个平滑滚动插件，正如 Preben 下面所说的

标签： jquery html css menu blogger

【解决方案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;
      }
    }
  });
});

【讨论】：

非常感谢，这就是我要找的东西

【解决方案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>

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

【讨论】：