SYNCERのロゴ
アイキャッチ画像

スクロールをする方法

JavaScriptでスクロールさせるには、scrollTo()、scrollBy()などのメソッドを利用します。

サンプルコード

// 絶対指定
scrollTo( 0, 100 ) ;

// 相対指定
scrollBy( 0, 100 ) ;

デモ

絶対位置で指定

ページ上の指定した座標位置にスクロールするには、scrollTo()というメソッドを利用します。ブラウザ画面の左上部分が合わさる位置座標を指定して下さい。横スクロールが発生するページはあまりないので、第1引数には0を指定することが多いでしょう。毎回、必ず同じ位置までスクロールします。

// 第1引数: 左端からの距離 (px)
// 第2引数: 上端からの距離 (px)
scrollTo( 0, 100 ) ;

相対位置で指定

現在のスクロール位置を起点として、どれだけの距離をスクロールするかを相対的に指定するには、scrollBy()というメソッドを利用します。負の数を指定すれば、右方向、上方向にスクロールできます。

// 第1引数: 現在位置から左方向に移動する距離 (px)
// 第2引数: 現在位置から下方向に移動する距離 (px)
scrollBy( 0, 100 ) ;

  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年6月22日 (木)
コンテンツを公開しました。