Question

尝试编写脚本，为解析为当前页面上的锚点的所有链接添加平滑滚动。试图使这个通用，以便它在整个网站范围内工作。

var links = document.querySelectorAll('a')
var anchorLinks = []

for (var i = 0; i < links.length; i += 1) {
  console.log(links[i].href, window.location.href)
}

这是我的开始，但我遇到了挑战，我正在使用Stackoverflow来查看是否有人在没有jQuery的情况下完成了这项工作。

我必须检查href是否有#，但我还必须检查当前网址是否与href匹配，因为其他网站也使用#。

那会这样吗？或者我错过了其他什么？

Answer 1

总结一下，请参阅Location object。

试试这个：

var locwohash = window.location.href.replace(/#.+/, "")
var anchorLinks = document.querySelectorAll('a[href^="'+locwohash+'"],a[href^="#"]')

实际上还有另一种方法：

http://example.com/path/to/page#hash

应该更快，但如果想要对不同类型的链接href稳健，则会很复杂。（对于#another-hash，此页面中有许多要链接到锚点的href，page#another-hash，example.com/path/to/page#another-hash，/path/to/page#another-hash，//example.com/path/to/page#another-hash，http://example.com/path/to/page#another-hash， tell application "System Events" to key code 124 using control down，所有这些都是等价的，但选择器不相同。

如何在页面锚链接中添加平滑滚动

1 个答案: