クリエイティブなWeb制作に
役立つ情報メディア

【いまスニ】いまさら感漂うスニペット集 簡単スムーズスクロールのアレンジ※デモあり※

「いまスニ」とはいまさら感漂うスニペット集をまとめる記事です。
第一回としては、現在のWebサイト制作には欠かせない「スムーズスクロール」に着目しました。
スムーズスクロールはJavaScriptを使って簡単に実装できます。

本記事ではjQueryを利用しますので、自分で試してみる時は忘れずにjQueryを読み込んでくださいね!
jQueryのCDNは https://code.jquery.com/ より取得できます。

JavaScriptコードのおさらい

よく見るJavaScriptコードとしては以下のようなものが多いかと思います。

今回は、少しコードの解説をして、簡単なアレンジをしてみたいと思います!

※1 easingは別途jQuery Easing Ppluginを入れることで増やすことができます。easing早見表https://easings.net/ja

こんな感じの処理をしています。
さて、実際に少しアレンジしてみましょう。

特定の要素だけスムーズスクロールしたい

例えばよく使うページトップへ戻るボタンなんかの場合、イベントを発火させる要素をカスタマイズするだけですね。
プラスして不要なコードを削除してサンプルを作ってみました。

としてやれば、class「totop」が含まれる要素をクリックすることで、ページの一番上までスクロールできます。
この場合class「totop」はaタグ以外に付与しても動作します。

まとめ

いかがでしたでしょうか。
単純にコピペで利用するよりも、中身をしっかり理解して実装ができると、いろんなケースで利用できますので、ぜひお試しください。