JavaScriptでスクロール位置を設定する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでスクロール位置を設定する方法について現役エンジニアが解説しています。任意の位置にスクロールをさせたい場合は、scrollToメソッドもしくはscrollByメソッドを使用します。scrollToメソッドは絶対値。scrollByメソッドは相対値を元にして計算します。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptでスクロール位置を設定する方法について解説します。

実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptでスクロール位置を設定する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

JavaScriptでスクロール位置を設定する方法

JavaScriptで任意の位置にスクロールを設定させたい場合は、scrollToメソッドもしくはscrollByメソッドを使用します。それぞれのメソッドの使用方法を見ていきたいと思います。

  • scrollToメソッド:画面のスクロールを「画面の上部からの絶対位置」を指定して行います。ページの一番上、一番下に移動したいときなどに使用できます。
  • scrollByメソッド:画面のスクロールを「現在のスクロール位置」を基準とした相対距離で移動します。ボタンを押した位置から、指定の距離移動させたいときなどに使用します。

実際に書いてみよう

scrollToメソッドの構文

scrollTo(100, 200);

第一引数にx座標を指定し、第二引数にy座標を指定します。

scrollByメソッド構文

scrollBy(100, 200);

scrollToメソッドと構文は同じですが、現在の画面位置がxに50px、yに100px移動している場合に使用したときに画面上部からは、x:150px y:300px移動することになります。

イベントが発動したら画面の最上部に移動する

function scrollToTop() {
 scrollTo(0, 0);
}

 

scrollToメソッドで0,0を指定すると、絶対値参照になるので画面の最上部に移動することになります。

 

イベントが発動した地点から、指定した地点に移動する

HTML

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

<div><button onclick='scrollByTarget()'>このボタンの位置から移動</button>

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

JavaScript

function scrollByTarget() {
 scrollBy(400, 150);
}

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

筆者プロフィール

水野大輝(みずのたいき)

2014年より、某物流会社のシステム開発担当として入社。

未経験ながら、社内システム保守~新規受注システム開発まで携わり、JavaScript Ruby on Rails PostgreSQLなどの経験を積む。
現在も、開発案件に携わりながら、日々勉強中。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。