jQueryでページ内リンクをスムーススクロールさせる方法
- 投稿日:2019/05/30
- JavaScript/jQuery
先に「必ず使うページ上部に戻るスムーススクロール用jQuery」という記事を書きましたが、ページ上部に戻る時にスムーススクロールにするなら、サイト内の全てのページ内リンク(アンカーリンク)でスムーススクロールしたいですよね。
$(function(){
// #で始まるアンカーをクリックした場合に処理
$('a[href^="#"]').click(function() {
// スクロールの速度
var speed = 500; // ミリ秒
// 移動先を取得
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;
});
});
こちらもよく使いますがいつも忘れてその度に調べるので備忘録として。
この記事が気に入ったらシェアしてください