WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

スムーススクロール(jQuery)

スムーススクロールとはページ内リンクなどでリンク先に飛ぶ際に、瞬間移動するのでは無く、スムーズにスクロールしてリンク先に行く動きのことです。最近ではほとんどのサイトで普通に使われています。

通常のページ内リンクの場合、瞬間的にリンク先に飛んでしまうので、ユーザーがどこに移動したか一瞬解らなくなってしまいます。スムーススクロールの場合、今までユーザー自身がスクロールした分が戻っていくのが可視化されていくので、状況がすぐに掴めます。
スムーススクロールで検索するとネット上に色々なプラグインがありますが、他のプラグインとバッティングしないよう、極力シンプルな記述にするようにしましょう。

$(function(){
	var topBtn = $('#to-top');    
    topBtn.hide();
    //スクロールが100に達したらボタン表示
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            topBtn.fadeIn();
        } else {
            topBtn.fadeOut();
        }
    });
$('#to-top').on('click touchstart', function () {
	    $('html,body').animate({ scrollTop: 0 }, 'swing');
	    return false;
});
});