【jQuery】クリック時にscrollLeftで左右スクロールする方法

【jQuery】クリック時にscrollLeftで左右スクロールする方法 JavaScript

今回はjQueryでクリック時に左右にスクロールする方法を解説します。

 

スポンサーリンク

クリック時に右から左へスクロール

「横スクロールできる領域内で、一番右にあるボタンをクリックすると左まで横スクロールで戻る」という機能を実装してみます。

デモはこんな感じ↓

See the Pen
poyzRBX
by wagashi000327 (@wagashi000327)
on CodePen.

矢印をクリック時にhtml, bodyanimate()をかけます。スムーススクロールとかでもhtml, bodyanimate()をかけますよね?あれと同じ感じです(もし動かなかったら親要素にanimate()をかけてみてください!)

jQueryのanimate()はCSSのプロパティだけでなく、scrollTopscrollLeftといった値も操作できるので、scrollLeft: 0を指定して左スクロールの位置を0に戻します。

たったこれだけです。アニメーションの秒数やイージングはお好みでどうぞ。

 

今回は右から左にスクロールさせましたがその逆もできますね。

また、animate()はコールバックも指定できるので応用すれば色々できそうです。

 

まとめ

左スクロールのやり方は調べてもなかなか出てこないので書いてみました。

つまずきポイントとしてはhtml, bodyanimate()をかけるというところでしょうか。

簡単にできるので試してみてくださいね。