使锚标签在向下滚动页面时平滑滚动

Question

我正在尝试实现与phptherightway.com相同的结构。当您在右侧主页上滚动时，我认为左侧会通过锚点跳下，因为它突出显示了左侧。我该如何重新创建它？可以仅使用锚标记完成此操作，还是需要jquery等更高级的功能？

右侧是否使用此功能？

同时左侧使用？-

Answer 1

如果您单击此锚链接：

<a href="#example">Click Me</a>

页面将跳转到：

<div id="example">....</div>

现在，如果您希望页面滚动到#example部分而不是jumping，则必须使用jQuery scroll()。

这是如何使用scroll的简单jQuery示例：

$(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;
      }
    }
  });
});

这里是带有上述脚本的jsfiddle：http://jsfiddle.net/AndrewL32/65sf2f66/23/