jquery - jQuery を使用して、名前付きアンカーを使用してページのスムーズなスクロールを実行しますか?

Question

私は 1 ページの Web サイトに取り組んでおり、各セクションに名前付きのアンカーを含めたいと考えています。

また、ナビゲーションのハイパーリンクをクリックすると、ページがすばやくジャンプするのではなく、スムーズに上下にスクロールするようにしたいと思います。

使用できる最も単純なコピー アンド ペースト タイプの jQuery スクリプトは何ですか?

ありがとう

Answer 1

これは、トリックを実行する簡単な小さなスクリプトです。

aナビゲーションのリンクのセレクターに置き換えます。スクロールbody, htmlすると、スクロールがはるかにスムーズになることがわかりました

$('.nav_item').click(function(e){
    e.preventDefault(); //used to prevent default actions
    var _this = $($(this).attr('href'));
    $('body, html').animate({
        scrollTop: _this.offset().top
    }, 400) // how ever fast you want it to scroll.

});

Answer 2

これは正確なスクリプトではありません。「href」属性に完全なリンクがある場合 (たとえば、htref="http://kremlin.ru/#putin" (#putin だけでなく))、スクリプトは機能しません。スクリプトが href 内の任意のタイプのリンクで機能するようにするには、属性を解析し、マーク「#」の前にあるものをすべて削除する必要があります。完全に機能するものを次に示します。

$(".scroll").click(function(e){
       e.preventDefault(); //used to prevent default actions
    var linker = $(this).attr('href');
    var linkerN=linker;
        linkerN=linkerN.replace(/^.*\#/, '');
        // alert(linkerN);
     if(linker.indexOf('#') > 0){

        $('body, html').animate({
        scrollTop: $('a'+'[name='+linkerN+']').offset().top}, 400);
    }
    else{
    //alert ('no "#" in link, going to go to:'+linker);
    window.location.href=linker;
   }
});