【jQuery】ページ内リンクを「スクロール」する方法とは?!【学習メモ】

HTML

<a href ="#HOME">HOME</a>

jQuery(2系、3系)

<script type="text/javascript">
    $(function() {
        $('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}, position, 'swing');
        return false;
       });
    });
 </script>

※jQuery(1系)の場合は「””」は不要。
(おさかなはココで躓いてました…。)

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


「解説」

・#ではじまるリンクをクリックしたら実行

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

・スクロールのスピード(ミリ秒単位)

var speed = 400;

・アンカーリンク(aタグ)の値取得

var href = $(this).attr("href");

・移動先を取得

var target = $(href == "#" || href == "" ? 'html' :href);

・移動先を「数値」で取得

var position = target.offset().top;

・スクロール

$('body,html').animate({scrollTop:position}, position, 'swing');


おすすめ記事


この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

「この記事おもしろい!」「おさかなは海に帰れ!」 「泳げないおさかな…なんて…!」と、思ったそこのあなた!!!! ぜひ!サポートよろしくお願いします🙇 様々なジャンルの本を読むために活用させていただきます✨ 「え、読書する新種のおさかなだ!」と思ったあなたも!今すぐタッチ!

いいセンスしてますね~!
3

おさかな

学習メモ

「プログラミング」で学んだことのメモ書きになります。「コード」をたくさん載せていくので、ぜひ参考にしてみてください!
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。