使用JavaScript（本机或jQuery）平滑滚动HTML书签

通过HTML书签，您可以使用锚链接快速转到页面上的任何部分，例如以下示例：

1 2 3 4

<a href="section1">Jump to Section 1</a> " " <div id="section1">This is section 1 content</div>

默认情况下，这个过程是突然而且瞬间完成的，就像在清晨从床上猛拉一样。对许多人来说，这不是一次愉快的经

有许多JavaScripts可以平滑过渡到HTML书签的行为，尽管所有这些都依赖于动画文档的scrollTop位置来模拟滚动页面。这一切都相当迂回而低效。

在现代浏览器中，现在有一种本地方式可以通过锚链接将页面平滑地滚动到特定元素。在本教程中，我将向您展示如何使用ES6脚本和DOM方法scrollIntoView() 以最少的代码和没有JavaScript框架来实现这一点。

对于那些仍然需要遗留浏览器支持的人，我还会提供一个在旧版浏览器中运行的jQuery替换脚本。

演示：点击下面的锚点链接。Smooth Scrolling适用于Chrome和Firefox。书签本身适用于所有浏览器：

• 使用Native JavaScript平滑HTML书签滚动

• 使用history.pushState()更新浏览器的URL历史记录

• 浏览器支持本机HTML书签滚动

• 使用jQuery创建平滑滚动书签链接

使用Native JavaScript平滑HTML书签滚动

为了能够原生地平滑滚动到页面上的任何元素，我们可以转向旧的JavaScript方法，该方法已在现代浏览器中更新，以支持平滑移动到页面上的元素。element.scrollIntoView()

在所有较新版本的Chrome，Firefox和Opera中，该 scrollIntoView()方法支持一些新选项，其中一个是“ behavior”选项，可以实现平滑滚动：

1 2 3 4

element.scrollIntoView({     behavior: 'smooth',     block: 'start' // scroll to top of target element })

Element是您希望导航到的DOM元素。除了“ behavior” 之外还有其他选项，您可以在MDN上了解这些 选项。

我们需要做的就是定位页面上的所有HTML锚点链接，并覆盖它们的默认行为， element.scrollIntoView()以便轻柔地平滑到它们引用的元素。使用ES6 JavaScript，整个事件是无痛的。

使用ES6 JavaScript的最终结果如何：

演示：

 

完整代码：

1 2 3 4 五 6 7 8 9 10 11 12 13 14

let anchorlinks = document.querySelectorAll('a[href^="#"]')   for (let item of anchorlinks) { // relitere     item.addEventListener('click', (e)=> {         let hashval = item.getAttribute('href')         let target = document.querySelector(hashval)         target.scrollIntoView({             behavior: 'smooth',             block: 'start'         })         history.pushState(null, null, hashval)         e.preventDefault()     }) }

只需上面的代码片段，无论是在页面末尾添加还是在页面加载时执行的包装器内部，页面上的所有锚点链接都会在单击时平滑地滚动到所请求的元素。凉！

注意上面突出显示的行。这是一个很酷的技巧，#target可以在每次跳转后使用hash（）静默更新浏览器的URL ，这样用户也可以通过浏览器的URL轻松导航到该元素，就像使用真正的HTML书签一样。更多关于此的信息。

使用history.pushState()更新浏览器的URL历史记录

默认情况下，调用element.scrollIntoView() 不会使用可导航的哈希来扩充浏览器的URL。这是一个巨大的短 ING，因缺乏火当方法已经完成滚动到目标元素的任何事件的进一步恶化。这意味着我们无法编写在转换后手动更新浏览器URL的自定义代码。

您可能只想使用JavaScript的 location.hash属性来修改浏览器的URL。但是，这有一个问题。更新location.hash会导致浏览器立即跳转到页面上的目标元素，这会在scrollIntoView() 方法内部调用时中断任何动画。

而这正是可以COM实时得心应手即 它以静默方式附加到浏览器的当前URL，而不会触发任何进一步的操作。接受三个参数：history.pushState()history.pushState()

• 状态对象： {bar: "foo"}与此新历史记录条目关联的文字对象。它可以是任何可以用JavaScript序列化的东西，可以通过属性使用popstate事件处理程序 访问数据state。

• 标题：历史条目的标题。目前被大多数浏览器忽略。

• URL：用于替换或附加当前浏览器URL的绝对或相对URL。在前一种情况下，URL必须与站点本身位于同一域中，否则将引发错误。

我们只对每次滚动元素时用哈希更新浏览器的URL感兴趣，所以我们需要这样的一行：

1	history.pushState(null, null, "#newhash")

而已。

浏览器支持本机HTML书签滚动

上面的代码片段汇集了JavaScript中的一些现代功能，从ES6脚本history.pushState()到“ behavior”选项scrollIntoView()。

该代码适用于所有最新版本的Chrome和Firefox。IE Edge尚不支持“ behavior”选项。然而，无论如何，好消息是，如果旧版浏览器不支持该片段，则该脚本不会阻止跳转到目标元素。换句话说，这一切都很好。

使用jQuery创建平滑滚动书签链接

如果您的网站已经使用了jQuery框架，那么只要有可能就在您的网站上利用它是有意义的。

随着滚动HTML书签，您cgan使用下面的jQuery脚本到交流COM plish这一点。它具有在IE Edge及以下版本中工作的额外好处，以及在目标元素滚动到之后指定转换持续时间和任何自定义操作的功能：

1 2 3 4 五 6 7 8 9 10 11 12 13 14

jQuery(document).ready(function($){     var $root = $('html, body');     $('a[href^="#"]').click(function() {         var href = $.attr(this, 'href');         $root.animate({             scrollTop: $(href).offset().top         }, 500, function () {             window.location.hash = href;         });                   return false;     });   })

使用jQuery的缺点显然是jQuery本身的大量占用空间。滚动脚本也是效率要低得多 COM缩减到本机版本。但是，如果您已经在您的网站上加载了jQuery，那么这些好处在我看来是值得的。

很高兴看到浏览器向原生平滑滚动转向HTML书签。在我看来，它应该是浏览器中的默认行为，但这只是一个人的意见，不喜欢生活中任何事物的突然变化，包括在浏览器中。