今回はjQueryでクリック時に左右にスクロールする方法を解説します。
クリック時に右から左へスクロール
「横スクロールできる領域内で、一番右にあるボタンをクリックすると左まで横スクロールで戻る」という機能を実装してみます。
デモはこんな感じ↓
See the Pen
poyzRBX by wagashi000327 (@wagashi000327)
on CodePen.
矢印をクリック時にhtml, bodyにanimate()をかけます。スムーススクロールとかでもhtml, bodyにanimate()をかけますよね？あれと同じ感じです（もし動かなかったら親要素にanimate()をかけてみてください！）
jQueryのanimate()はCSSのプロパティだけでなく、scrollTopやscrollLeftといった値も操作できるので、scrollLeft: 0を指定して左スクロールの位置を0に戻します。
たったこれだけです。アニメーションの秒数やイージングはお好みでどうぞ。
今回は右から左にスクロールさせましたがその逆もできますね。
また、animate()はコールバックも指定できるので応用すれば色々できそうです。
まとめ
左スクロールのやり方は調べてもなかなか出てこないので書いてみました。
つまずきポイントとしてはhtml, bodyにanimate()をかけるというところでしょうか。
簡単にできるので試してみてくださいね。
