BLOG

  • Facebook
  • Twitter

jQuery|一定距離スムーススクロールするボタンの実装方法

角田翼

角田翼

jQueryで簡単にできる!一定距離スムーススクロールするボタンの実装方法

こんにちは。福岡のホームページ制作会社、シンス株式会社の角田(すだ)です。
今回はjQueryを使用した、「一定距離スムーススクロールするボタン」実装の方法についてご紹介したいと思います。
ユーザーの使いやすさの観点から、スクロールできる要素をボタン操作によってスクロールさせるという実装をしたいといったこともあるかなと思い、作成してみました。
是非今回紹介するやり方を参考にしてみて下さい。

上下に一定距離スムーススクロールするボタン

まずは上下にスクロールさせるボタンの実装方法から説明します。
実装の例としては以下のようになり、矢印のボタンを押すと上下に100pxずつスクロールします。

HTMLの”scroll-box”というクラス名の中の構造はtableやimgなどでも使用することができるかと思います。
jQueryにコメントアウトで記載している時間の部分も、好きにアレンジして使ってみて下さい。

jQueryのコード解説

それではjQueryのコードの解説をおこなっておきます。
jQueryのコードは以下のようになります。
このコードを直訳すると「ボタンをクリックするとスクロールボックスを現在位置から0.3秒間かけて100px移動する」という意味になります。

まずクリックイベントを作成し、上ボタン(btn-up)または下ボタン(btn-down)をクリックすると発火するようにします。
次にクリックイベントの中でanimate()のメソッドを使います。
※animate()とは特定のHTML要素のCSSプロパティを連続して変化させることでアニメーションを実現してくれるメソッドのことです。
animate()の中で「scrollTop:」のプロパティを使用し、現在位置から100pxスクロールさせるようにします。
現在位置の取得は「scrollTop()」により行うことができます。

左右に一定距離スムーススクロールするボタン

次に左右にスクロールさせるボタンの実装方法から説明します。
実装の例としては以下のようになり、矢印のボタンを押すと左右に100pxずつスクロールします。

jQueryのコード解説

書き方は上下のスクロールボタンとほとんど同じになります。

上下のスクロールボタンの場合は「scrollTop」を使用していましたが、左右のスクロールボタンは要素の左側を基準とする為「scrollLeft」を使用しています。
あとは指定するクラス名をそれぞれ変更するだけで、上下のスクロールボタンと同じように実装することができました。

まとめ

いかがでしたでしょうか。
今回のように、ページ全体やウィンドウの幅・高さだけでなく、中がスクロールできる要素でもスクロール位置の取得をすることができます。
なるべく簡潔にコードを書いてみましたので、是非アレンジして使って頂けると嬉しいです。

最後に、私たち「シンス株式会社」は福岡でホームページ制作を行なっております。ご興味のある方は下記リンクから是非覗いてみて下さい。

https://since-inc.jp

〈 この記事を書いた人 〉

角田翼

角田翼

社内では、Webサイトのコーディングを主に担当しています。

ユーザー目線で使いやすく、ターゲットにしっかり検索して見てもらえるWebサイトの構築を目指してます。

その他のオススメの記事

ホームページのことは何でもお気軽にご相談ください!

092-406-8630

平日10:00〜18:00セールス目的のお電話はご遠慮ください

シンス株式会社

Webマーケティングのお役立ち情報を発信しています!