こんにちは。福岡のホームページ制作会社、シンス株式会社の角田（すだ）です。
今回はjQueryを使用した、「一定距離スムーススクロールするボタン」実装の方法についてご紹介したいと思います。
ユーザーの使いやすさの観点から、スクロールできる要素をボタン操作によってスクロールさせるという実装をしたいといったこともあるかなと思い、作成してみました。
是非今回紹介するやり方を参考にしてみて下さい。
上下に一定距離スムーススクロールするボタン
まずは上下にスクロールさせるボタンの実装方法から説明します。
実装の例としては以下のようになり、矢印のボタンを押すと上下に100pxずつスクロールします。
HTMLの”scroll-box”というクラス名の中の構造はtableやimgなどでも使用することができるかと思います。
jQueryにコメントアウトで記載している時間の部分も、好きにアレンジして使ってみて下さい。
jQueryのコード解説
それではjQueryのコードの解説をおこなっておきます。
jQueryのコードは以下のようになります。
このコードを直訳すると「ボタンをクリックするとスクロールボックスを現在位置から0.3秒間かけて100px移動する」という意味になります。
|
1 2 3 4 5 6 7 8 9 10 |
$('.btn-up').click(function () { $('.scroll-box').animate({ scrollTop: $('.scroll-box').scrollTop() - 100 //〇〇px上にスクロールする }, 300); //スクロールにかかる時間 }); $('.btn-down').click(function () { $('.scroll-box').animate({ scrollTop: $('.scroll-box').scrollTop() + 100 //〇〇px下にスクロールする }, 300); //スクロールにかかる時間 }); |
まずクリックイベントを作成し、上ボタン（btn-up）または下ボタン（btn-down）をクリックすると発火するようにします。
次にクリックイベントの中でanimate()のメソッドを使います。
※animate()とは特定のHTML要素のCSSプロパティを連続して変化させることでアニメーションを実現してくれるメソッドのことです。
animate()の中で「scrollTop:」のプロパティを使用し、現在位置から100pxスクロールさせるようにします。
現在位置の取得は「scrollTop()」により行うことができます。
左右に一定距離スムーススクロールするボタン
次に左右にスクロールさせるボタンの実装方法から説明します。
実装の例としては以下のようになり、矢印のボタンを押すと左右に100pxずつスクロールします。
jQueryのコード解説
書き方は上下のスクロールボタンとほとんど同じになります。
|
1 2 3 4 5 6 7 8 9 10 |
$('.btn-left').click(function () { $('.scroll-box').animate({ scrollLeft: $('.scroll-box').scrollLeft() - 100 //〇〇px左にスクロールする }, 300); //スクロールにかかる時間 }); $('.btn-right').click(function () { $('.scroll-box').animate({ scrollLeft: $('.scroll-box').scrollLeft() + 100 //〇〇px右にスクロールする }, 300); //スクロールにかかる時間 }); |
上下のスクロールボタンの場合は「scrollTop」を使用していましたが、左右のスクロールボタンは要素の左側を基準とする為「scrollLeft」を使用しています。
あとは指定するクラス名をそれぞれ変更するだけで、上下のスクロールボタンと同じように実装することができました。
まとめ
いかがでしたでしょうか。
今回のように、ページ全体やウィンドウの幅・高さだけでなく、中がスクロールできる要素でもスクロール位置の取得をすることができます。
なるべく簡潔にコードを書いてみましたので、是非アレンジして使って頂けると嬉しいです。
最後に、私たち「シンス株式会社」は福岡でホームページ制作を行なっております。ご興味のある方は下記リンクから是非覗いてみて下さい。
〈 この記事を書いた人 〉
角田翼
社内では、Webサイトのコーディングを主に担当しています。
ユーザー目線で使いやすく、ターゲットにしっかり検索して見てもらえるWebサイトの構築を目指してます。
