.NETエンジニア・プログラマ向けの技術情報・業界ニュースをお届けします。

  1. FEnet.NETナビ
  2. .NETコラム
  3. プログラミング言語
  4. Javascript
  5. jQueryのscrollTopとは?scrollTopを正しく使いこなそう!

jQueryのscrollTopとは?scrollTopを正しく使いこなそう!

  • Javascript
  • プログラミング言語
公開日時:   更新日時:
jQueryのscrollTopとは?scrollTopを正しく使いこなそう!
この記事でわかること
    基本情報技術者試験の試験対策はこちら>>

    システム
    エンジニア
    スクロール位置を取得できるメソッドについて教えてください。

    プロジェクト
    マネージャー
    scrollTopメソッドですね。Web画面の縦スクロール位置を取得できるメソッドです。

    jQueryのscrollTopとは?


    jQueryはJavaScriptで利用できる多機能なライブラリです。その機能の1つのscrollTopメソッドは、Web画面の縦スクロール位置を取得したり、縦スクロール位置を設定することができます。これを使ったアニメーション処理を実現することもできます。

    なおこの記事のjQueryのサンプルを利用する場合は、htmlのheadタグに以下を記述してください。jQueryのバージョンは以下が最新とは限りませんが、最新でなくても動作はします。

    <script src=”https://code.jquery.com/jquery-3.5.1.min.js”></script>

    スクロール位置の取得

    縦のスクロール位置を取得する方法は簡単です。htmlのscriptタグ内に以下のjQueryを記述します。

    $(document).ready(function(){
    var top = $(window).scrollTop();
    console.log(top);
    });

    documentやwindowはセレクタ、readyやscrollTopはメソッドと言います。$(document).ready(function(){~});はドキュメントが読み込まれたらreadyの指定したfunctionの処理を行うという意味です。その中ではwindowでブラウザ画面を取得し、scrollTopメソッドで値を取得しています。

    取得した値はconsole.logでログ出力しています。ログ出力を見るには、Google Chromeの場合は該当する画面でF12キーを押して、DevToolsのConsoleタブを選択することで見られます。

    より分かりやすいサンプル

    htmlが空のような状態で上のサンプルを実行すると、ログには0と出力されます。一番上にスクールされている状態なので0なのですが、これではscrollTopの機能がよくわかりません。そこでhtmlを以下のように記述します。

    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <button>button</button>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

    そしてjQueryは以下のようにしてください。

    $(document).ready(function(){
    $(‘button’).click(function(){
    var top = $(window).scrollTop();
    console.log(top);
    });
    });

    スクロール位置の取得や設定が可能

    今度のサンプルはブラウザの中央付近にボタンが表示されます。改行を沢山記述したので縦のスクロールバーを上下できます。スクロールバーを動かしてボタンを押すとclickメソッドによりスクロール位置取得の処理が呼ばれ、ログには現在のスクロール位置が表示されます。前よりscrollTopの機能がわかりやすくなりました。

    次はjQueryを以下のように記述してください。

    $(document).ready(function(){
    $(‘button’).click(function(){
    $(window).scrollTop(200);
    });
    });

    このサンプルを実行して、スクロールバーを移動してからボタンをクリックしてみましょう。ボタンがクリックされると縦スクロール位置が200にセットされます。

    offset().topの機能は?

    jQueryにはscrollTopに似たメソッドとしてoffset().topがあります。jQueryの記述を以下のようにしてください。

    $(document).ready(function(){
    $(‘button’).click(function(){
    var top = $(‘button’).offset().top;
    console.log(top);
    });
    });

    実行してボタンをクリックすると、環境にもよりますがログに488などと表示されたりします。これはボタンの縦位置を表しています。offset().topはhtml部品の縦位置を取得できるということです。

    scrollTopのアニメーション

    次はスクロールでアニメーションをしてみましょう。jQueryを以下のように変更して実行してみてください。

    $(document).ready(function(){
    $(‘html’).animate({scrollTop:200});
    });

    スクロールバーがすっと動いて縦200の位置になりました。jQueryならアニメーションがこんなに簡単にできてしまうのです。なおアニメーションの場合はセレクタはwindowではなくhtmlを指定します。

    offset().topを応用する

    ここまでの応用で、指定したhtml部品の所にスクロールバーを移動させることもできます。

    $(document).ready(function(){
    $(‘button’).click(function(){
    var top = $(‘button’).offset().top;
    $(‘html’).animate({scrollTop:top});
    });
    });

    実行してボタンをクリックすると、ボタンがブラウザの左上の位置になります。

    jQueryを使わない場合

    実はjQueryを使わなくてもJavaScriptだけでスクロール位置は取得できます。

    $(document).ready(function(){
    $(‘button’).click(function(){
    var top = window.pageYOffset;
    console.log(top);
    });
    });

    このようにwindow.pageYOffsetでもスクロール位置は取得できます。指定したスクロール位置に移動するにはscrollToを利用します。

    $(document).ready(function(){
    $(‘button’).click(function(){
    window.scrollTo(0,200);
    });
    });

    JavaScriptとjQueryのどちらを使ってもかまいませんが、jQueryで統一したいならscrollTopを使うべきでしょう。スクロール位置取得も移動も1つのメソッドでできるメリットもあります。

    システム
    エンジニア
    位置を取得したり移動や変更もできる便利なメソッドなんですね。

    プロジェクト
    マネージャー
    このメソッドとアニメーションを駆使して見栄えのするWebページをぜひ作成してみてください。

    jQueryのscrollTopは手軽に使えるメソッド

    jQueryのscrollTopについて解説しましたが、ご理解頂けましたでしょうか。スクロール位置を簡単に取得・設定できるscrollTopやアニメーションを使いこなして、驚くようなWebページを是非開発してください。

    FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
    株式会社オープンアップシステムロゴ

    株式会社オープンアップシステムはこんな会社です

    秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結!
    数多くのエンジニアが集まります。

    秋葉原オフィスイメージ
    • スマホアプリから業務系システムまで

      スマホアプリから業務系システムまで

      スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。

    • 充実した研修制度

      充実した研修制度

      毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。

    • 資格取得を応援

      資格取得を応援

      スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。

    • 東証プライム上場企業グループ

      東証プライム上場企業グループ

      オープンアップシステムは東証プライム上場「株式会社夢真ビーネックスグループ」のグループ企業です。

      安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

    株式会社オープンアップシステムに興味を持った方へ

    株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

    年収をアップしたい!スキルアップしたい!大手の上流案件にチャレンジしたい!
    まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

    株式会社オープンアップシステムへのご応募はこちら↓
    株式会社オープンアップシステムへのご応募はこちら↓

    新着案件New Job