ページを開いたらすぐに指定のページ内リンクにスクロールさせる

2012-08-08    275   521

ページを開いた直後に指定のページ内リンクまでスムーズにスクロールさせるという技。jqueryを使用しています。下記のコードは#sampleの部分まで移動させるという場合のものです。任意で変更してください。

<script>
$(function() {
    var p = $("#sample").offset().top;
    $('html,body').animate({ scrollTop: p }, 'slow');
    return false;
});
</script>
※var p = ~~とありますが、このpはHTMLタグのpとは関係ありません。ただの変数名です。

<2019/7/30 追記>


スムーズスクロールはCSSのみで導入できるようになっていました。
※IEとSafariは非対応
html{
    scroll-behavior: smooth;
}

comment 登録なしでご自由にご入力いただけます(^^)ぜひぜひ記事のご感想をお聞かせ下さい。

お名前とコメントは入力必須です。

コメントの文字数が短すぎます。

この内容でコメントを送る
コメントをする
この記事がお役に立てましたら是非シェアのご協力お願いします。