webデザイン・コーディングに役立つ情報、WordPressカスタムに使えるHTML・CSSコピペ用コード、Canva無料テンプレートなどをご紹介します♩

ちいさなwebデザインブログCHIIWEBLG

【コピペOK】スムーススクロールは必ずつけたい

コーディングについて

スムーススクロールだぜ!

この記事を書いている人
Marie

Marie

  • フリーランスwebデザイナー&講師
  • 2児ママ
  • 制作会社・インハウスデザイナーを経験し独立
  • オンラインwebデザイン教室ちいウェブ運営
  • 仕事の合間の息抜きに植物を育てています♡
  • スプラ・DIY・将棋がすき

スムーススクロールは、ページ内リンクをクリックした時に、ビュンッて場所に移動するんじゃなくって、スルスル〜〜〜と移動する為につける動きのことです。

ページトップに戻るボタンやナビゲーションでも、ページ内を移動する時にはついておいて欲しい動きなので、必ずつけるようにしたいです!パソコンを使う女性

今回は、コピペで使える記述を紹介します。

コピペ用記述

$(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;
  });
});

はい、もう、これです。

これをコピぺしたらスルスル動くようになります。

ページ内リンクって、リンク先が「#」から始まりますよね。

ページトップへ戻るボタンは、リンクは「#」だけでOKです。

で、この記述は、リンクが「#」で始まるものに対してスルスルさせてね。って書いてます。

 var speed = 500;

「500」になってるところはスピードなので、お好みに合わせて変更してください。

手を挙げる女性これどこに貼り付けたらいいかわからないよ、って方は挙手してください。

貼り付け場所

貼り付け場所は、「.js」ファイル、もしくはフッターの下などの、「<script></script>」内に置いてください。

jsファイルだと、<script>は不要なので、上記の記述をそのままコピーしてペーストしてください。

htmlファイルやphpファイルに置くときは、以下のように<script></script>で括って貼り付けてください。(中身は上と全く同じです。)

<script>
	$(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;
  });
});
</script>

↓ページ内リンクの付け方はこちらも参考にしてください^^

この記事が役に立ったと思ったら
TAPしてね♡↓

コメントする

CAPTCHA


コメントは承認後に表示されます。

関連記事

更新通知を受け取る

新規記事投稿時にメールでお知らせします^^