jQueryを使ってページ内リンクをスムーススクロールさせる方法

jQueryを使ってページ内リンクをスムーススクロールさせる方法

jQueryを使ってページ内リンクをスムーススクロールさせる方法
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加


  • 「重たい銃」果里 -karin- PV
    平和賛成を願って綴った曲です。
  • このエントリーをはてなブックマークに追加

jQueryを使って、ページ内リンクをスルスルっとスムーススクロールさせる方法をご紹介いたします。紹介するコードをコピペするだけで、ページ内リンクをクリックした時の移動が滑らかになります。

スポンサードリンク

jQueryを使ってページ内リンクをスムーススクロールさせる方法

</body>の直前に以下を追加します。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$(function(){
$("a[href^=#]").click(function(){
$("html,body").animate({ scrollTop: $($(this).attr("href")).offset().top }, 800 ,"swing");
return false;
})
});
</script>

すでにjQuery本体を読み込んでいる場合は、1行目は削除してください。「800」のところは、リンク先に移動するまでの時間なので、値を小さくすると移動が速く、大きくすると移動が遅くなります。

上記を追加すると、以下のようなページ内リンクをクリックした時に、スルスルっと滑らかに移動するようになります。

<a href="#target">ページ内リンク</a>
・・・
<div id="target">リンク先</div>

あとがき

jquery.smoothScrollなどのプラグインを使う方法もありますが、上述した内容をコピペするだけで動作するので、プラグインを使うまでもないかもですね。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。