コード・実装

【jQuery】スムーススクロールの実装方法 (相対パス / 絶対パス)

jQueryでのスムーススクロールの実装の実装方法をご紹介。

スムーススクロールとは?

スムーススクロールとはページ内アンカーにスクロールで移動するイメージです。

動きでいう下記のようなイメージです。

スムーススクロールの実装方法 (相対パス)

jQueryコード

下記で実装が可能です。

jQuery(function ($) {
  $('a[href^="#"]').click(function () {
      var speed = 800;
      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;
 });
});

 

HTMLコードサンプル

<!-- リンク -->
<a href="#link01">リンク1</a>

<!-- 移動先 -->
<div id="link01"></div>

 

クリックする際のリンクにはhrefに移動先のidを’#link01’という形で指定してください。

移動先には上記に対応したidをid=”link01″と記述してください。

(※idは任意の英数字なので、link01以外の文字でも大丈夫です。)

 

絶対パスでの指定方法

上記は相対パスでの指定方法でした。

ただ、絶対パスで指定したいという場合もあるのではないでしょうか?

その場合は下記になります。

jQuery(function ($) {
  $("a[href*='#']").click(function () {
    var speed = 400;
    var href = jQuery(this).attr("href");
    var target = jQuery(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top;
    jQuery("html, body").animate({
      scrollTop: position
    }, speed, "swing");
    return false;
  });
});

 

$(‘a[href^=”#”]’)を、$(“a[href*=’#’]”)に変更してください。

下記のようなエラーが出る場合、

Uncaught Error: Syntax error, unrecognized expression: a[href*=#]

$(“a[href*=#]”)の「#」部分を「’#’」とすると解決するかもしれません。

 

HTMLコードサンプル

<!-- リンク -->
<a href="http://sample.com/#link01">リンク1</a>

<!-- 移動先 -->
<div id="link01"></div>

 

以上です!

最後まで閲覧していただき、ありがとうございました。

 

ABOUT ME
WEBクリ開発者
当ブログでは主にWeb制作・HTML・ CSS・SCSS・JavaScript・jQuery・Vue.js・Wordpress・個人開発情報の情報を発信。 WEBデザイナー・コーダー・プログラマー向けのサイトです。 また、個人開発のサービスやアプリのお知らせもさせていただいています。

未経験からでも技術を学べる

Udemy

Udemyとは、100,000以上の講座があるオンライン学習プラットフォームです。主に社会人が対象で、教えたい人が講座を開き、学びたい人が学ぶことができます。

何か新しいプログラミング言語を勉強したい。技術を習得したいという時に、Udemyはおすすめです。

動画学習のため、最初につまづきがちな環境構築も実際の画面で確認しながら、自分で動かすことができます。

 

世界最大級のオンライン学習サイトUdemy

 

MENTA

プログラミングの学習をサポートしてくれる人を探したいのならMENTAがおすすめ。

メンターさんや他のメンティさん(自分と同じようにプログラミングを学習している方々)とやりとりをし、学習を進める形が多いです。

\新規登録で300円割引クーポンプレゼント/プログラミング学習のスキルプラットフォーム【MENTA】