【いまスニ】いまさら感漂うスニペット集 簡単スムーズスクロールのアレンジ※デモあり※
「いまスニ」とはいまさら感漂うスニペット集をまとめる記事です。
第一回としては、現在のWebサイト制作には欠かせない「スムーズスクロール」に着目しました。
スムーズスクロールはJavaScriptを使って簡単に実装できます。
本記事ではjQueryを利用しますので、自分で試してみる時は忘れずにjQueryを読み込んでくださいね！
jQueryのCDNは https://code.jquery.com/ より取得できます。
JavaScriptコードのおさらい
よく見るJavaScriptコードとしては以下のようなものが多いかと思います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
$(function(){ $('a[href^="#"]').on("click", function(){ var speed = 500; var href= $(this).attr("href"); var target = $(href == "#" || href == "" ? 'html' : href); var position = target.offset().top; $("html, body").animate({scrollTop:position}, speed, "swing"); return false; }); }); |
今回は、少しコードの解説をして、簡単なアレンジをしてみたいと思います！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
//jQueryの決まりごと $(function(){ // aのhrefプロパティの先頭が#になっている要素のクリックイベントに発火 $('a[href^="#"]').on("click", function(){ // speedという変数を作成し、スクロールさせるスピードを定義。1000 = 1秒 var speed = 500; // hrefという変数を作成し、イベントを発火させた要素に含まれるhrefプロパティを格納。 var href = $(this).attr("href"); // targetという変数を作成し要素を格納。変数｢href｣が#または空だった場合、｢html｣。そうでない場合は変数｢href｣。 var target = $(href == "#" || href == "" ? 'html' : href); // positionという変数を作成し、target要素に含まれるoffset().topの値を格納。 // offset().topはドキュメントの左上からの距離を取得します。 var position = target.offset().top; // htmlとbodyの要素にanimateを追加 // scrollTop:position は変数「position」の値までスクロール。 // speed はスクロールの時間。 // swing はeasingの種類。jQuery単体では「liner」と「swing」の2種類しかありません。※1 $("html, body").animate({scrollTop:position}, speed, "swing"); // falseを返す return false; }); }); |
※1 easingは別途jQuery Easing Ppluginを入れることで増やすことができます。easing早見表https://easings.net/ja
こんな感じの処理をしています。
さて、実際に少しアレンジしてみましょう。
特定の要素だけスムーズスクロールしたい
例えばよく使うページトップへ戻るボタンなんかの場合、イベントを発火させる要素をカスタマイズするだけですね。
プラスして不要なコードを削除してサンプルを作ってみました。
としてやれば、class「totop」が含まれる要素をクリックすることで、ページの一番上までスクロールできます。
この場合class「totop」はaタグ以外に付与しても動作します。
まとめ
いかがでしたでしょうか。
単純にコピペで利用するよりも、中身をしっかり理解して実装ができると、いろんなケースで利用できますので、ぜひお試しください。
by ピロシキ
