web-dev-qa-db-ja.com

ページ読み込み時にIDまでスクロールするアニメーション

ページロード時にスクロールを特定のIDにアニメートするようにします。私はたくさんの研究をしましたが、これに遭遇しました。

$("html, body").animate({ scrollTop: $('#title1').height() }, 1000);

しかし、これはIDから始まり、ページの上部にアニメートするようですか？

HTML（ページの途中）は単純に次のとおりです。

<h2 id="title1">Title here</h2>
jqueryscrolljquery-animate
120
Adi

あなたはあなたの要素の高さをスクロールするだけです。 offset（） はドキュメントを基準とした要素の座標を返し、topパラメータは要素のy軸に沿ったピクセル単位の距離を返します。

$("html, body").animate({ scrollTop: $('#title1').offset().top }, 1000);

そしてそれに遅延を追加することもできます。

$("html, body").delay(2000).animate({scrollTop: $('#title1').offset().top }, 2000);
317
BumbleB2na

scrollIntoView（） 関数を使った純粋なJavaScriptソリューション：

document.getElementById('title1').scrollIntoView({block: 'start', behavior: 'smooth'});
<h2 id="title1">Some title</h2>

P.Sコメントで述べられているように、 'smooth'パラメータはChrome 61からjulien_cとして機能するようになりました。

9
Vladimir Vovk
$(jQuery.browser.webkit ? "body": "html").animate({ scrollTop: $('#title1').offset().top }, 1000);

jquery-animate-all-browser-body 。

4
AleX gRey

これのためのjqueryプラグインがあります。ドキュメントを特定の要素にスクロールして、ビューポートの真ん中にくるようにします。スクロール効果が非常に滑らかに見えるように、アニメーションのイージングもサポートしています。 --- このリンク を確認してください。

あなたの場合、コードは

$("#title1").animatedScroll({easing: "easeOutExpo"});
3
Eugene Tiurin

次のコードで試してください。クラス名を持つ要素を作るpage-scrollそしてid名を対応するリンクのhrefに保つ

$('a.page-scroll').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: ($($anchor.attr('href')).offset().top - 50)
        }, 1250, 'easeInOutExpo');
        event.preventDefault();
    });
1
Akhil

単純なスクロールの場合は、次のスタイルを使用してください。

高さ：200ピクセル。オーバーフロー：スクロール。

このスタイルクラスを使用して、どのdivまたはセクションのスクロールを表示するか

0
m.m