- 中野貴登：Webクリエイター
-
【jQuery】スムーズスクロールの設定方法を紹介します！
こんにちは、イデアックスの「中野」です。
さまざまなwebサイトを見ていると、スムーズスクロールの設定がされているサイトを多く見かけます。
スムーズスクロールとは、同じページ内のリンク先まで気持ちよくスクロールされることで、主にページ内リンクに使用されます。弊社も必要であればスムーズスクロールの設定を行います。
このスムーズスクロールですが、jQueryを使えば簡単に設定することが出来ます。
今回はjQueryを使用してスムーズスクロールの設定方法を紹介します！
スムーズスクロールの設定方法
スムーズスクロールを設定するにはまずjQueryを導入します。下記のコードをHTMLファイルの<head>と</head>の間にコピペしてください。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
これでjQueryの導入は終わりました！
続いて導入したjQueryの設定を行います。下記のコードをHTMLファイルの</body>の直前に配置してください。
<script>
$(function(){
$('a[href^="#"]').click(function() {
let speed = 500;
let href= $(this).attr("href");
let target = $(href == "#" || href == "" ? 'html' : href);
let position = target.offset().top;
$('body,html').animate({scrollTop:position}, speed, 'swing');
return false;
});
});
</script>
これで準備は完了です。あとはアンカーリンクの設定を行うだけです。
まずはスクロール先の場所にidを作成します。
<div class="wrapper" id="scroll">
<p>ここにスクロールされたい</p>
</div>
次にスクロールのトリガーとなる場所に、<a>タグでアンカーリンク設定を行います。
<a href="#scroll">ここをクリックするとスクロールする</a>
リンク先にidを入力するので、頭に＃をつけることを忘れないように気をつけてください！
これでスムーズスクロールの設定は以上です。とても簡単ですよね。今すぐにスムーズスクロールしたいという方は、コピペして活用してください。
スクロール時間の変更
スムーズスクロールのスクロール時間を変更することが出来ます。
コードの変更箇所は下記の部分です。
let speed = 500;
1000で1秒となります。数字を増やすとスクロール時間が長くなります。基本的には400~500で良いかと思いますが、何かしらのこだわりがあるようでしたら調整してみてください。
最後に
以上がスムーズスクロールの設定方法でした。思ったより簡単だったかと思います。
他にもコーディングに関する内容の記事がありますので、こちらも読んでみてください！
合わせて読みたい記事↓
