jQuery で要素にスクロールする 4つのメソッド

1. jQuery で要素にスクロールするための前提条件
2. jQuery ScrolltoElement-ドキュメントウィンドウでスクロール
3. jQueryAnimate ScrollTop-animate メソッドを使用したスムーズなスクロール
4. jQuery ScrollTop から内部リンクへ-スムーズなスクロール jQuery
5. jQuery はコンテナ内の要素までスクロールする
6. 覚えておきたいヒント
7. jQuery ScrollTop の 2つのクイックショートカット

jQuery のさまざまなユースケースの要素にスクロールする簡単なソリューションを示します。scrollTop() メソッドと offset() メソッドを使用しますが、position() を使用した新しい方法のデモも行います。

jQuery を使用してスムーズなスクロールをアニメーション化する方法を説明します。最後に、エラーを回避するための 2つの一般的なショートカットといくつかのヒントをデモします。

jQuery で要素にスクロールするための前提条件

1. scrollTop()
2. offset()
3. position()

まず、jQuery の要素にスクロールするために使用するメソッドを見てみましょう。

scrollTop()

jQuery の scrollTop() メソッドを使用すると、任意の要素の scrollTop プロパティを取得および設定できます。scrollTop プロパティの値は、要素のコンテンツが現在垂直方向にスクロールされているピクセル数です。

scrollTop プロパティについて詳しくは、こちらをご覧ください。

.scrollTop()-現在の scrollTop 値を取得する

要素の現在の scrollTop 値を返すために、引数なしで scrollTop() を使用します。

console.log($('#container').scrollTop());

コンソールに要素の scrollTop ビューの値が表示されます。要素を別の位置にスクロールして、scrollTop プロパティの値を再度記録してみましょう。

ここでは、コンソールが異なる値をログに記録していることがわかります。この get フォームの jQuery scrollTop() メソッドは、スクロール効果を実現するための鍵です。

.scrollTop(val)-新しい scrollTop 値を設定する

スクロールしたい値を set フォームの jQuery scrollTop() メソッドに渡すことができます。

$('document.documentElement').scrollTop(0);

値 0 を渡すため、これによりメインドキュメントが一番上にスクロールされます。これは、役立つショートカットとして再び表示されます。

この set 形式の scrollTop() にいくつかのキー値を渡して、jQuery のスクロールから要素への動作を実現します。

jQuery の scrollTop() 関数について詳しく知ることができますここ。

offset()-jQuery でスムーズなスクロールを実装するのに役立つ要素の位置を見つける

jQuery の offset() メソッドを使用すると、ドキュメントの任意の要素の現在の位置を特定できます。このメソッドは、top と left の 2つのプロパティを返します。これらは、ドキュメントのボーダーボックスのピクセル数です（つまり、余白なし）。

console.log(`The position of the element w.r.t document is : ${
    $('#container').offset().top}`);

offset() メソッドは、ドキュメントに対する要素の最上位の位置を表示します。

jQuery の offset() メソッドの詳細については、こちらをご覧ください。

position()-jQuery で要素へのスクロールを実装する別の方法

position() メソッドは offset() メソッドに似ていますが、わずかな違いがあります。最も近い親に対する要素の位置を返します。したがって、たとえば要素の相対位置を微調整して jQuery で scrolltop をアニメーション化する場合、position() メソッドが役立ちます。

jQuery の position() メソッドの詳細は、このリンクで入手できます。

position() は、マージンを含む要素の位置を返します（ここでは、offset() メソッドとは異なります）。

// displays the position w.r.t. its closest parent

console.log(`This is the position of the element w.r.t. its closest parent:
${$('.filler:first').position().top}`);

// the offset() method displays position relative to the document

console.log(`This is the position of the element w.r.t. the document:
${$('.filler:first').offset().top}`);

基本が終わったら、jQuery のさまざまなユースケースの要素にスクロールしてみましょう。

jQuery ScrolltoElement-ドキュメントウィンドウでスクロール

$('#clickButton').on('click', function() {
  $([
    document.documentElement, document.body
  ]).scrollTop($('#scrollToMe').offset().top);
});

1. #clickButton は、クリックしてターゲット要素までスクロールするためのボタンです。
2. #scrollToMe は、スクロール先の要素です。

コードを分解してみましょう：

.on メソッドを使用して、ボタンにイベントハンドラーをアタッチします。このハンドラーをトリガーするイベントは、最初の引数である"click"イベントです。

ユーザーがボタンをクリックすると、コードは .on メソッドの 2 番目の引数で（匿名の）コールバック関数を実行します。

まず、ドキュメント全体を選択して、2つのセレクター引数（ルート要素である document.documentElement、この場合は html 要素と document.body 要素）のいずれかを使用してスクロールします。

次に、この要素に対して set 形式で scrollTop() メソッドを実行します（上記を参照）。ターゲット要素（#scrollToMe ID を持つ画像要素）にスクロールトップします。

したがって、最初に、offset().top メソッドを使用して、ページの上部からこのターゲット画像要素までのピクセル数を見つけます。このメソッドは、ドキュメントに対する相対的な位置を見つけることを忘れないでください。

次に、この値をドキュメントの root / body 要素にアタッチされた scrollTop() メソッドに渡します。したがって、上記のビデオデモに見られるように、Web ページ全体がターゲットの画像要素に移動します。

したがって、このメソッドは、jQuery の要素へのスクロール動作を簡単に実現します。

しかし、正直なところ、ターゲット要素へのこのインスタントスクロールは退屈に見えます。見栄えの良いスムーズなスクロール jQuery 効果を得るために、さらにコードを追加しましょう。

jQueryAnimate ScrollTop-animate メソッドを使用したスムーズなスクロール

$('#clickButton').on('click', function() {
  $([
    document.documentElement, document.body
  ]).animate({scrollTop: $('#scrollToMe').offset().top}, 500)
});

コードは前の方法と似ています。選択した root/body 要素に対してのみ animate() メソッドを実行します。

最初の引数は、アニメーション化するターゲット CSS property:value ペアを持つオブジェクトです。

ここでは、scrollTop プロパティを変更して、ターゲットの画像要素に到達するだけです。そのため、ページ上部から画像にピクセル数の値を割り当てます。

これは、前のメソッドと同様に、画像要素の .offset().top メソッドで確認できます。

jQuery ScrollTop から内部リンクへ-スムーズなスクロール jQuery

次のコードを使用して、任意の内部リンクへの再利用可能な jQuery scrolltop モジュールを作成することもできます。

$('a[href^="#"]').on('click', function(e) {
  e.preventDefault();
  let targetHash = this.hash;
  let targetEle = $(targetHash);

  $([
    document.documentElement, document.body
  ]).animate({scrollTop: targetEle.offset().top}, 500);
})

ここでコードロジックにドリルダウンしましょう。 （scrollToInternalLink.html、scrollToInternalLink.js、および scrollToInternalLink.css ファイルを参照してください。）

まず、[href^="#"] jQuery 属性セレクターで a タグを選択します。 ^記号を使用するため、jQuery は # 記号で始まる href 属性を持つ a タグのみを選択します。

フラグメント識別子を使用して、内部的に任意の要素にリンクします。これらは内部リンクへの参照であり、常に # 記号を前に付けます。

したがって、上記の jQuery セレクターはページ上の内部リンクを選択します。

HTML の内部リンクについて詳しくは、こちらをご覧ください。

次に、e.preventDefault() メソッドを呼び出して、ページをリロードする a タグのデフォルトの動作を無効にします。

ここで、ターゲット要素のハッシュを抽出します。これは、ターゲット要素のフラグメント識別子への参照です。最新の HTML コードのほとんどは、ターゲット要素の id 属性を使用しています。

この hash を使用して、ターゲット要素を選択します。

残りのコードは、上記のスクロールする jQuery アニメーションコードと同じです。animate() メソッドを渡し、scrollTop プロパティをターゲット要素の offset().top 値に設定します。

jQuery はコンテナ内の要素までスクロールする

ターゲット要素がスクロール可能なコンテナ内にある場合があります。次のコードを使用して、このように配置された要素に対して jQuery を実行できます。

let container = $('#container');
let scrollToMe = $('#scrollToMe');

$('button').on('click', function() {
  container.animate(
      {
        scrollTop: scrollToMe.offset().top - container.offset().top +
            container.scrollTop()
      },
      500)
});

ここで、#container は、コンテナとして機能する外側の div 要素です。

#scrollToMe は、スクロール先のターゲット画像です。これは、外側の div コンテナ内にネストされています。

また、外側の div コンテナには、他のネストされた div 要素と p 要素があります。この外側の div コンテナはスクロール可能で、垂直スクロールバーがあります。

トリガーボタンにクリックイベントハンドラーを追加します。コールバックは、container 要素で animate メソッドを実行します。

コンテナの scrollTop プロパティを新しい値に設定します。この新しい値は、次の式で計算されます。

scrollToMe.offset().top - container.offset().top + container.scrollTop()

1. scrollToMe.offset().top は、ドキュメントの上部からターゲットの画像要素までのピクセル数です。
2. container.offset().top は、ページの上部からコンテナ div 要素の上部までのピクセル数です。

ただし、少し問題があります。コンテナの div 要素はスクロール可能です。最初にスクロールすると、その数のピクセルだけ下に移動します。

したがって、container.scrollTop() の要素を scrollTop メソッドに渡すパラメーターに追加する必要があります。

覚えておきたいヒント

上記の jQuery メソッドを使用して要素にスクロールするための 2つの重要なヒントがあります。

プロのヒント 1：

offset メソッドと position メソッドは float 値を返します。ページで多くのズームが予想される場合は、エラーが発生する可能性があります。したがって、parseInt 関数を使用して、最初に戻り値を int 値に変換できます。

$('#clickButton').on('click', function() {
  $([
    document.documentElement, document.body
  ]).scrollTop($('#scrollToMe').parseInt(offset().top));
});

プロのヒント 2：

animation() も引数としてイージング関数を取ります。この関数は、アニメーションの実行方法を決定します。

この関数のデフォルト値は swing で、スムーズで均一なアニメーション効果を提供します。したがって、このデフォルト値を使用して、スムーズにスクロールする jQuery 自体を取得できます。

jQuery ScrollTop の 2つのクイックショートカット

最後に、要素への jQuery スクロールの 2つの一般的なユースケースに対する 2つの簡単なショートカットがあります。

jQuery スクロールしてドキュメントの先頭にショートカット

たくさんのコンテンツを含む長い Web ページがある場合は、ナビゲーションを簡単にするために、下部に上にスクロールリンクを提供することをお勧めします。

このようなアンカーリンクのショートカットコードは次のとおりです。

// this code scrolls to the top of the document with a click on the anchor
// element

$('#top').on('click', function() {
  $(document.documentElement, document.body).animate({scrollTop: 0}, 500);
});

animate 関数のターゲット scrollTop 値を 0 に設定します。これにより、ページの上部にスクロールします。

jQuery の URL にハッシュ/フラグメント識別子を追加する要素までスクロール

ターゲット要素のフラグメント識別子をアドレスバーの URL に追加する場合は、上記のアンカーリンクコードへのスクロールに 1 行だけ追加する必要があります。

// this code adds the fragment identifier/hash of the target
// element to the URL

// this is a reusable module to jQuery scrollTop from any internal link

$('a[href^="#"]').on('click', function(e) {
  e.preventDefault();
  let targetHash = this.hash;
  let targetEle = $(targetHash);

  $([
    document.documentElement, document.body
  ]).animate({scrollTop: targetEle.offset().top}, 500, function() {
    window.location.hash = targetHash;
  });
})

行 window.location.hash = targetHash は、この機能を提供するコードです。

要素のハッシュ/フラグメント識別子 scrollToMe が URL の最後に追加されていることがわかります。

このコードスニペットを animate 関数へのコールバックとして含めるように注意して、アニメーションの後に実行されるようにしてください-JavaScript のベストプラクティスと同期しています。