ここ数年で一気に増えたシングルページのWebサイト。
そうしたWeb制作に欠かせないのはページ内を「スルスルーッ」と移動するスムーススクロールのリンク動作。
今回はそうしたスムーススクロールをWebページに実装させるためのコードを解説します。
実際に使うjQueryコードは、下記の記事に掲載しているコードがわかりやすかったので利用させていただいております。
【jQuery】ページ内リンクをするするーっとスムースにスクロールするJavascript ｜ KLUTCHE
1 2 3 4 5 6 7 8 9 10 | $(function(){ $('a[href^=#]').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; }); }); |
jQueryを読み込んで、上記のコードを利用することでページ内のスムーススクロールが可能になります。
それではコードの流れをおおまかに解説していくと、
- hrefの値に#が含まれているaタグをクリックした時に動作する。
- スムーススクロールのスピードをspeedという変数に設定。
- リンク先指定箇所のページ最上部からの位置をpositionという変数に格納。
- animateメソッドでpostionの位置までhtmlをスクロールさせる。
という流れになっています。
スクロールの移動スピードを調整したい場合はspeedに設定する値を変更します。
また、スムーススクロールの開始と終了の動きを調整したい場合はanimateメソッドのeasingに関わる引数（上記例ではswingに設定されている）を変更するとひと味ちがう動きが試すことができます。
easingの早見表などを参考にして気に入った動きを使ってみてください。
それではまた！
集客効果をアップするSEOノウハウを駆使して、費用対効果の高いホームページ制作を承っております。
