ページ内ヌルヌル

ページ内 ヌルヌルでgoogle検索するといっぱいでてきます。ヌルヌルって言い出したのはだれなんでしょうか。

http://webnonotes.com/javascript-2/pagescroll/これが一番上に出てきます。

this.hashこれで、ハッシュの要素を取得できるようです。 $(hash).offset().topこれで位置を取得できるようです。 $('html,body').animate({scrollTop: offset}, 800);これでヌルヌル移動できるようです。800がスピードでしょう。

これだと、URLは変わらないのか。backborn使ったときみたいなURLも変えつつ、移動したいな。トップに戻るとかならこれで全然いいんだな。とりあえず、ついにページトップに戻るボタンをつくりたいと思います。

トップにヌルヌル戻る

HTMLのどこかに、このようなものを作ります。

<div id="back_top" onclick="back_top();"></div>

そして、このようなjavascriptを作ります。

function back_top(){
    $("html,body").animate({scrollTop: 0}, 800);
}

これだけです。画面のどこにいるかを確認して、上から500pxくらいになったらTOPに戻るボタンを表示するようにしたい。

上から500pxになったらTOPに戻るボタンを表示する

$(window).scroll(function () {
    if($(this).scrollTop() > 500){
        $('#back_top').fadeIn();
    }else{
        $('#back_top').fadeOut();
    }
});

これだけです。

ページ内ヌルヌル移動

クリックしたらuRL変わるようにしたいし、URL変えつつヌルヌルするのめんどくさいからやめよう。