0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

簡単!jQueryでページ内リンクをスムーススクロールする方法

Last updated at Posted at 2019-12-27

LPやページが長い時によく使われるページ内リンクをスムーススクロールさせる方法を備忘録もかねて書きます。
この記事のコードをコピペして実装してみてください!

早速、
##HTML

 <ul>
    <li><a href="#section1">SECTION1</a></li>
    <li><a href="#section2">SECTION2</a></li>
    <li><a href="#section3">SECTION3</a></li>
    <li><a href="#section4">SECTION4</a></li>
    <li><a href="#section5">SECTION5</a></li>
  </ul>
  <div id="section1" class="box"><p>SECTION1</p></div>
  <div id="section2" class="box"><p>SECTION2</p></div>
  <div id="section3" class="box"><p>SECTION3</p></div>
  <div id="section4" class="box"><p>SECTION4</p></div>
  <div id="section5" class="box"><p>SECTION5</p></div>

各ボタンとリンク先のdivを記述しています。

##CSS

ul{
  display: flex;
  padding:40px 0 0;
}
ul + div{
  margin-top:30vh;
}
ul li{
  list-style-type: none;
  padding-right:20px;
  padding-left:0;
}
ul li a{
  text-decoration:none;
}
div.box{
  height:300px;
  width:100%;
}
div.box p{
  font-size:24px;
}
.box:nth-child(2){
  background-color: #9FA1D9;
}
.box:nth-child(3){
  background-color: #CBB5DB;
}
.box:nth-child(4){
  background-color: #E3E4F5;
}
.box:nth-child(5){
  background-color: #8778D7;
}
.box:nth-child(6){
  background-color: #9B9BAB;
}

こちらのcssの記述は実装した時に分かりやすいように書いているだけなので、確認した後に消してください!!

##script

 $(document).ready(function () {
      $('a[href^="#"]').click(function() {
        var offsetTop = 0;
        var scrollSpeed = 400;
        var href= $(this).attr("href");
        var target = $(href == "#" || href == "" ? 'html' : href);
        var scrollPosition = target.offset().top + offsetTop;
        $('body,html').animate({scrollTop:scrollPosition}, scrollSpeed);
        return false;
      });
    });

下記で簡単に解説をします!

###イベント発動

$('a[href^="#"]').click(function() {

こちらはaタグがクリックされたらイベントが発動します。
対象要素の$('a[href^="#"]')と記述されている部分ですが、
「#から始まるhref属性を持つaタグ」をクリックしたらイベントが発動するという記述になります。

###変数に値を代入

var offsetTop = 0;
var scrollSpeed = 400;
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var scrollPosition = target.offset().top + offsetTop;

各変数に値を代入しています。

var offsetTop = 0;
→リンク先の要素の画面上部からの位置を調節します。

var scrollSpeed = 400;
→スクロール開始してから移動先までの時間を指定します。

var href= $(this).attr("href");
→クリックされたaタグのhref属性の値を変数に代入します。

var target = $(href == "#" || href == "" ? 'html' : href);
→これは三項演算子という条件分岐です。上記でhrefに代入された値によって、hrefの値が変わります。
hrefの値が#もしくは'(空)'の場合は$('html')を変数に代入
hrefの値が#もしくは'(空)'以外の場合は$(href)を変数に代入

var scrollPosition = target.offset().top + offsetTop;
→移動先の位置を指定しています。

###スクロールのアニメーション

$('body,html').animate({scrollTop:scrollPosition}, scrollSpeed);
return false;

scrollTopに値(scrollPosition)を指定してスクロールさせます。スクロールスピードは先ほど指定した400ミリ秒です。
そしてreturn false;を指定することによってaタグのデフォルトの機能(リンク機能)を消しています。

##まとめ

scriptの説明では分かりづらい単語もありましたが、必要に応じて調べていただければと思います。
説明部分で足りないところや、scriptでもっとこうした方がいいよー!などお意見をいただけたら嬉しいです!

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?