スムーススクロールが繰り返されない上部アンカー

Question

$(document).ready(function(){ 
    // Add smooth scrolling to all links 
    $("a").on('click', function(event) { 

    // Make sure this.hash has a value before overriding default behavior 
    if (this.hash !== "") { 
     // Prevent default anchor click behavior 
     event.preventDefault(); 

     // Store hash 
     var hash = this.hash; 

     // Using jQuery's animate() method to add smooth page scroll 
     // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area 
     $('html, body').animate({ 
     scrollTop: $(hash).offset().top 
     }, 1000, function(){ 

     // Add hash (#) to URL when done scrolling (default click behavior) 
     window.location.hash = none; 
     }); 
    } // End if 
    }); 
}); 

私はこれを実行して、url-hashを変更せずにスムーススクロールして "#top"にします。私は誤ってURLを更新しないように変更する方法を発見しました（ "window.location.hash"の "none"を追加しました）が、問題が1つあります。これで関数は繰り返されません。ここで

は何が起こるかです：

• ロードページ
• スクロールダウン
• 押してトップアンカー
（URLを更新せず）上へ
• ページをスクロール
• 下にスクロールして再び
• プレストップアンカー
• 何も起こらない

私はこのスニペットがどこにあるのかわかりませんが、しばらく私のjs-フォルダに入れました。

Answer 1

2つの方法でページをスクロールしています。

hashは、URLの#somethingです。ページの読み込み時にアンカーにスクロールする場合に便利です。ユーザーがページのトップにスクロールするために、私はスクロールをトリガリンクのhrefトップアンカーのidを使用することになり、https://codepen.io/Bes7weB/pen/ybWNbJ?editors=1111#hello

その後：

は、このリンクで#hello効果を参照してください。関数。
これは、ページ内のすべてのリンクではなく、この特定のリンク上で機能を起動します。 ;）

最後に、この行：window.location.hash = none;は、元のonloadハッシュ値をnoneに変更しようとしています。これは未定義の変数として解釈されます。これは文字列が必要なためです。

ReferenceError: none is not defined

私は単純に...その行を削除
またはあなたが本当にハッシュ値をクリアしたい場合になります。

スクロールトップ機能の作業

window.location.hash = ""; 

：参照codePenのためにHTMLマークアップが変更されました）

$(document).ready(function(){ 
    // Add smooth scrolling to all links 
    $("a#backTOtop").on('click', function(event) { 
    console.log($(this).attr("href")); 

    // Make sure this.hash has a value before overriding default behavior 
    if ($(this).href !== "") { 
     // Prevent default anchor click behavior 
     event.preventDefault(); 

     // Store hash 
     var top = $(this).attr("href"); 

     // Using jQuery's animate() method to add smooth page scroll 
     // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area 
     $('html, body').animate({ 
     scrollTop: $(top).offset().top 
     }, 1000, function(){ 

     // Add hash (#) to URL when done scrolling (default click behavior) 
     // window.location.hash = none; 
     }); 
    } // End if 
    }); 
}); 

Answer 2

urlハッシュに影響を与える必要がない場合は、そのコード行を削除するか（または//でコメントする）。 javascriptでエラーが発生するためです。あなたがURLからハッシュを削除したい場合は

、このコードを試してみてください。

history.pushState('', document.title, window.location.pathname + window.location.search); 

• 出典：How to remove the hash from window.location with JavaScript without page refresh?