ページ内リンクをスムーズスクロール

 

Aタグのリンクが#で始まるものに適応させる

$(‘a[href^=#]’)を指定することでページ内リンクを抽出させる

//ページ内リンクのスクロール
$(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;
    });

});

「Topへ戻る」ボタンは
<a href=”#”>Topへ戻る</a> とでもしておけばよい。

 

ちょっとスクロールしたら表示させる

「Topへ戻る」ボタンをちょっとスクロースさせたら表示させたい場合は、ボタンにidを付けて下記のようにすればよい

var pagetop = $('#pagetop');

$(window).scroll(function(){
    if ( $(this).scrollTop() > 500 ) { //500pxスクロールで表示
        pagetop.fadeIn();
    } else {
        pagetop.fadeOut();
    }
});

 

おわり

 

 - jQuery

  関連記事