【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');

おすすめ記事