LoginSignup
4
2

More than 5 years have passed since last update.

特定のテキストを持つHTML要素までスクロールする

Last updated at Posted at 2018-10-10

概要

特定のテキストを持つDOM要素を取得する場合、$('セレクタ指定:contains("テキスト")')が便利です。
contains内にスクロールしたい場所のテキスト要素を指定します。
その後、指定したDOM要素のoffset().topでスクロール位置を取得し、animate({scrollTop:指定したDOM要素.offset().top})で動くかと思います。

今日の日付を持つHTML要素までスクロールしたい

  // jsの日付は面倒なのでテスト用固定値で定義
  var nowDate = "2018/10/10";
  // class="day"のDOM要素の中で「2018/10/10」をテキストに持つ要素を取得
  var $nowDateSection = $('.day:contains("' + nowDate + '")');
  // 今日の日付が存在しない場合スクロールをしない(lengthが0の場合セレクタ指定で取得できていない = 指定した日付のデータが存在しないので処理する必要がない)
  if($nowDateSection.length === 0) return;
  // 指定したテキストを持つDOM要素までスクロールする
  $("html,body").animate({scrollTop:$nowDateSection.offset().top});

すべてのファイルの読み込みが終わった後にスクロールしたい

読み込むファイルが多い場合、スクロールした後にファイルの読み込みが行われ上に戻ってしまう場合があります。その場合はwindow.onloadに関数を指定してあげればOKです。

  window.onload = function() {
    var nowDate = "2018/10/10";
    var $nowDateSection = $('.day:contains("' + nowDate + '")');
    if($nowDateSection.length === 0) return;
    $("html,body").animate({scrollTop:$nowDateSection.offset().top});
  }

ブラウザバック時にもスクロールさせたい

ブラウザで戻ってもonloadイベントを走らせる
こちらのリンクが参考になりました。ブラウザにもよりますがChromeだとこのコードでちゃんと動くことが確認できました。
このコードを追加すればブラウザバック時にもスクロールされるようになります。
もちろんブラウザバック時にスクロールさせたくない場合はこちらのコードは使わなくて大丈夫です。

$(window).unload(function(){});
4
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
2