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

123

ページの読み込み時にスクロールを特定のIDにアニメーション化するためのタイミング。私はたくさんの研究をして、これに出くわしました：

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

しかし、これはIDから始まり、ページの上部にアニメーション表示されるようです。

HTML（ページの下半分）は簡単です：

<h2 id="title1">Title here</h2>

jquery scroll jquery-animate

— アディ
ソース

1

これはあまり答えにはなりませんが、Ariel Fleslerの「scrollTo」プラグインを強くお勧めします。これには、ページをパンするための多くの機能と、一般的な場合のためのプラグインのいくつかの拡張機能があります（たとえば、「LocalScroll」プラグインは、同じページ上にあるリンクのhrefにスクロールするのに便利です）。プラグインはこちらから入手できます：flesler.blogspot.com/2007/10/jqueryscrollto.html

— Faisal

327

要素の高さのみをスクロールしています。offset（）はドキュメントに対する要素の座標を返し、topparamは要素のy軸に沿ったピクセル単位の距離を示します。

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

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

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

— バンブルB2na
ソース

1

「WOW COOL !!」に行く自動スクロールってなに？多分それはあなたのソリューションのシンプルさです。

— theblang 2013

ページの読み込み時に要素をスクロールして表示する必要がありましたが、次の2つの問題がありました。b）bodyとhtmlのどちらが機能するかは、ブラウザによって異なります。したがって、プロジェクトでの使用に適応して、「任意の」ブラウザでビューへのスクロールが機能し、アニメーションが終了したときにコールバックが1つだけ取得されるようにすることができる要点を作成しました。gist.github.com/netsi1964/4ddffe1ae14e05220d25

— Netsi1964

2

これは本当に正しくありません。あなたは本当に私たちがしようとしているボディまたは要素の現在のスクロール位置を考慮する必要がありscrollます。これを念頭に置いて、の現在のスクロール位置を、表示する要素bodyのoffset().top位置に追加します。結果の合計は、スクロール先の値です。$('html, body').animate({ scrollTop: ($('html, body').scrollTop() + $('#title1').offset().top) }, 1000);

— mattdevio 2017年

@magreenberg試してみましたか？現在のスクロール位置が値0を超える場合、提案されているものが機能しない可能性があります。スクロール可能なコンテナーの高さが1000ピクセルで、現在のスクロール位置が1000であるとしましょう。スクロールする要素が500の垂直方向の中央にあるとします。、正しい？

— BumbleB2na 2017年

.offset().topこの場合、@ BumbleB2na は負の数を返します。これは本当に唯一の作品とbodyしてhtmlいるためにoffset().topあなたのドキュメントオフセットのトップを与えるために起こっている、いない親をスクロールすることを意図し。

— mattdevio 2017年

12

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

document.getElementById('title1').scrollIntoView({block: 'start', behavior: 'smooth'});

<h2 id="title1">Some title</h2>

スニペットを展開

コメントに記載されているjulien_cのように、PSの「スムーズ」パラメーターがChrome 61から機能するようになりました。

— ウラジミール・ヴォフク
ソース

1

現在動作しています（Chrome 61から）

— julien_c 2017年

ブラウザの互換性を確認してください。10/ 2018 IE（11）以降、EdgeとSafariは「scrollIntoView」をサポートしますが、「スムーズ」オプションはサポートしません。

— metal_jacke1

純粋なJS ftw。そのスニペットをありがとう！ダブルバタークリームのように滑らか

— jean d'arme

4

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

jquery-animate-body-for-all-browsers。

— AleXグレー
ソース

3

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

あなたの場合、コードは

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

— ユージーン・ティウリン
ソース

「また、スクロール効果が非常に滑らかに見えるように、アニメーションのイージングもサポートします」残念ながら、これは当てはまりません。コンピュータが何らかの理由で遅い場合、実際には正しく移動せずにジャンプし続けるだけです。

— brunoais 2014

スムーズなスクロールには、多くのピクセルを計算する必要があります。確かに遅い「コンピュータ」（より多くのGPU）はこれを行うことができませんが、十分なALUがないためです。だから一般的に彼は正しいです。そして、本当に簡単なlibのスクロール。

— Roland

1

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

$('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();
    });

— アキル
ソース

-3

シンプルなスクロールの場合は、次のスタイルを使用します

高さ：200px; オーバーフロー：スクロール;

そして、あなたがスクロールを表示したいdivまたはセクションであるこのスタイルクラスを使用してください

— んん
ソース