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でもっとこうした方がいいよー!などお意見をいただけたら嬉しいです!