ウェブデザイナーの毎日のお仕事のメモ

作成日:2021.06.07  最終更新日:2021.06.07

js / jQuery

ページ内リンクのスムーススクロールをjqueryで簡単に実装

ナビゲーションなどのリンクを押したら上にするするっと目的の位置まで移動する、ページ内リンクのスムーススクロールのjqueryでの実装方法のメモです。

ページ内リンクのスムーススクロールの書き方

まずは一番シンプルに、ページの下に常にページトップボタンが用意されているパターンです。

コード

JS

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

最新記事