Pocket
LINEで送る

ページ内 ヌルヌルで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変えつつヌルヌルするのめんどくさいからやめよう。

Pocket
LINEで送る

カテゴリー: プログラミング

コメントください

関連記事

プログラミング

Go言語によるビットコインのフルノード実装btcdを調べる(2)

btcdを実行した際のプログラムの流れを最初から確認してみます。 se 続きを読む …

プログラミング

Go – leveldb

Goで使えるLevelDB。 syndtr/goleveldb ドキュ 続きを読む …

%d人のブロガーが「いいね」をつけました。