【jQuery】コピペで解決!スムーススクロール

2019-03-21 07:24

クリックした時するするっと動く「スムーススクロール」を紹介します。

今回紹介するのは、jQueryを使ったものですので、事前にJQueryを読み込んでおいてください。
JQueryはこちらから

基本の構文
PC/SPでそれぞれ着地点を微調整したい時
をそれぞれ解説します。

基本の構文

基本の構文はこれになります。飛び先の要素がウインドウの上にピタリとくっつく感じで遷移します。解説入りコードは下です。ごちゃごちゃが嫌な時は上のコードを使用してください。

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

//ブラウザを読み込んだら実行
$(function(){

//ブラウザのウインドウ幅を取得
var width =  $(window).width();

//href属性に「#」が入っているaタグをクリックしたら実行
$('a[href*="#"]').click(function() {

//スピード 0.4秒
var speed = 400;

//飛び先を取得
var href= $(this).attr("href");

//飛び先取得の際、空or"#"のみだったら飛び先を「html」に設定
var target = $(href == "#" || href == "" ? 'html' : href);

//飛び先の要素のポジション座標を取得する
var position = target.offset().top;

//ここで取得した値をここに代入してスムーススクロールを実行する。
$('body,html').animate({scrollTop:position}, speed, 'swing');
return false;
});
});

PC/SPでそれぞれ着地点を微調整したい時

飛び先の要素がウインドウの上にピタリとくっつく感じでだと、追従しているheaderの下に潜ってしまったり、ぴったりすぎると見にくかったりしますね。
そこでheadの高さを取得してif文で条件分岐をして飛び先ポイントの微調整をしましょう。

positionから数字を引くことで移動距離を短くし、コンテンツが目線の高さに来るとこに遷移できます。進みすぎを戻すイメージですね。

$(function(){
var width =  $(window).width();
$('a[href*="#"]').click(function() {
var head =$("#str-header .str-header-pc .area-header-01").outerHeight();
var speed = 400; 
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
if( width > 767 ){ //PC時スクロール距離
var position = target.offset().top - 80 - head;
} else if(width < 767){ //SP時スクロール距離
var position = target.offset().top - 100;
}
$('body,html').animate({scrollTop:position}, speed, 'swing');
return false;
});
});