jQuery ページ内リンク（アンカー）をスムーズスクロール対応する方法

jQueryを読み込んだうえで、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},speed,'swing');
            return false;
        });
});

$(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},speed,'swing');

return false;

});

HTML上では、アンカーとリンクを用意しておくこと

リンク箇所

<a href="#hoge">ページ内リンク</a>

1	<a href="#hoge">ページ内リンク</a>

アンカー箇所（とび先）

&lt;a name="hoge" id="hoge" &gt;&lt;/a&gt;

1	<a name="hoge" id="hoge" ></a>

この記事を書いた人

purple

パズルファクトリー制作ノート

jQuery ページ内リンク（アンカー）をスムーズスクロール対応する方法

この記事を書いた人

新着記事

Practice is better than precept.