ボタンをスクロールしてウェブサイトをスムーズにスクロール

Question

クリックするとウェブサイトをスクロールさせるウェブサイトのボタンをいくつか作成したいと思います。たとえば、このウェブサイトのhttps://www.slugterra.com/をクリックすると、ウェブサイトの4つのボタンをクリックすると、スムーズにスクロールします。 今、このコードを使用して自分のウェブサイトを移動します。

<a href="#Center">Go to Center</a> 

Answer 1

私は自分のページにスムーズスクロールを実現するために、次のコードを使用します。

var $root = $('html, body'); 
$('.smothScroll').click(function() { 
    var href = $.attr(this, 'href'); 
    $root.animate({ 
     scrollTop: $(href).offset().top 
    }, 500, function() { 
     window.location.hash = href; 
    }); 
    return false; 
}); 

（注）このコードで、あなたが動作するように要素にクラス.smoothScrollを追加する必要があること。

余分なクラスを追加せずにすべてのリンクを操作する場合は、jQueryセレクターをaに変更することができますが、これは他の要素に望ましくない影響を与える可能性があります。

リンク先のページにスムーズなスクロール以外のアニメーションがあります。コードを分析すると、コンテナの絶対位置はtopとleftのプロパティで移動します。これは、スクロールイベントを聞き、コンテナのtopとleftプロパティを持つ実際のscrollTopパラメータと等価を設定することで簡単に達成できます。