ページアンカーリンク内のすべてのスムーズスクロールを追加する方法

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

私のスタートだが、私は挑戦に実行している、と私は誰がjQueryのなしでこれを行うのかどうかを確認するためにStackOverflowの上で手を差し伸べますよ。

hrefが#であるかどうかを確認する必要がありますが、他のサイトでも#を使用しているため、現在のURLがhrefと一致するかどうかを確認する必要があります。

そうでしょうか？あるいは私は何か他のものを逃していますか

Answer 1

要約すると、Location objectを参照してください。

これを試してみてください：

var links = document.querySelectorAll('a') 
var anchorLinks = [].filter.call(links,a=>(
    a.host==window.location.host&& 
    a.pathname==window.location.pathname&& 
    a.search==window.location.search&& 
    a.hash!=window.location.hash)) 

それを行うための別の方法は実際にあります：

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

は速くなるはずですが、リンクのhrefの異なる種類に堅牢になりたい場合は複雑になります。 （http://example.com/path/to/page#hashのために、そこにこのページ内のアンカーにリンクする多くのhref、#another-hash、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は動作しなければならないこと