2017-09-03 12 views
-4

私のWebサイト(www.trianglesquad.com)で「Click to Scroll」メニューを作成しようとしていました。私は w3schools.com "https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate_smoothscroll"からコードを試しました。私は問題に直面している。完璧な点までスクロールしません。たとえば、「ポートフォリオ」をクリックすると、ポートフォリオセクションの中央にスクロールします。 3〜4回クリックすると完全な点にスクロールします。 ヘルプは高く評価されます:)jQueryスムーススクロールで要素が正しく動作しない

ありがとうございます。

+1

これまでに試した関連するHTMLとJSコードを投稿してください。 –

+1

ようこそstackoverflow - あなたを持っていいです。 [良い質問をするにはどうすればいいですか?](https://stackoverflow.com/help/how-to-ask)と[最小限の完全かつ検証可能なサンプルを作成する方法](https:// stackoverflow。 com/help/mcve)を使用して、可能な限り高いレベルでスタックオーバーフローのコンテンツを維持し、適切な回答を得る機会を増やします。 – Axel

答えて

0

私たちすべてがいくつかの段階で初心者であったように、なぜ下の票があるのか​​分かりません...将来の投稿のために、例を挙げてJSフィドルを作成してください。

追加またはたとえば以下のとおりオフセットから減算することでオフセットをスクロール変更することができます。

$(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 -200 
     }, 800, function(){ 

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

鍵はここに持ち帰り、この行は次のとおりです。

scrollTop: $(hash).offset().top -200 

あなたが加算または減算することができます任意のピクセル数を選択できます。

編集:

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

$(document).ready(function() { 

$("#xp-navigation").find("a[href*=#]:not([href=#])").click(function() { 
     var offset = 0; 
     var speed = 1000; 
     var target = $(this.hash); 

     $("html,body").animate({ 
      scrollTop: target.offset().top - offset 
     }, speed); 
    }); 

}); 

それは少しきれいですし、また、オフセットを調整することができます。

関連する問題