さてさて本日二本目。

ページのトップに戻るボタン。

よくある、右下とか左下とかに現れる上向き矢印がそれです。

今回はこれを作りました。

というかなくなったと思ってたファイルを発見したので、ソースをあげておこうという考えです。

ページトップに戻る場合、このリンクを使うと思います。

<a href="#"></a>

ページ内リンクで使われるものかな

◯◯まとめとかで各項目にふっておいたものに対して飛んだりとかに使えたり。

ただ、このリンク、　押すと瞬時に上に戻るんです。

戻ってるけど戻ってる感ありません。一瞬すぎて。

そこで今回それを、

ページがある程度スクロールされたらページ右下に出して、クリックしたら上までヌルっと戻る。

そんなスクリプトを書きました。

というかドットインストールをもとにちょっとだけいじって書きました。

HTML

<div class="page_top" id="page_top"><a href="#">↑ ページトップへ</a></div>
<div class="page_top" id="pos"></div>

1行目は実際に押すリンク。aタグの間のテキストを画像に変えれば画像をクリックしてページトップに戻るということも出来る。

2行目は後述しますが、値とりの為のdiv(だと思います。)

CSS

.page_top {
    position: fixed;
    right: 5px;
    bottom: 10px;
}

リンクを表示させる場所の指定です。この場合は右下に。rightをleftに変えれば左下にも出来ますね。

左下に置くのはなかなか珍しいかと思います。

記事はFとかZに読むって言うからその辺考えて自然と右下になるのかな？

jQuery

$(function() {
    $('#page_top').hide();

    $(window).scroll(function() {
        $('pops').text($(this).scrollTop());
        if ($(this).scrollTop() > 60 )
            $('#page_top').slideDown();
        else
            $('#page_top').slideUp();
    });

    $('#page_top').click(function() {
        $('body').animate({
            scrollTop:0
        }, 700);

        return false;
    });
});

2行目は、最初の状態で、ある程度いくまでは隠れてて欲しいので、hide()で隠れてます。

4行目は、スクロール量に対しての表示非表示の部分で、htmlの二行目のdivで値を拾っていると思います。(最初何のdivか分からなかった。)

scrollTop()っていう関数が、初期位置からどれだけスクロールしたかを値として出してくれるので、それが60以上なら表示する。それ以外なら消す。というのが表示・非表示部分。

この時、slideDown(), slideUp()というものを使っていますが、fadeIn(), fadeOut()を使ってもいいかもしれない。これ使うにしても、出る方向の指定がしたいけど、どうするんだろう…？

12行目は、実際にクリックした時にどうなるか。もともとページトップに行くんですけど、行き方の設定ですかね。クリックした時に、animateで、700(7秒)かけてscrollTopが0の値まで戻る。700の値を変えれば速度を変えれますね。

return falseに関してはなんだろう？

clickのfunction()の返り値がfalse???

ここだけちょっとよく分からないので後日調べます。

今後、これに使う画像をIllustratorで作成して、実際にココの新テーマや、以前使ったサイトに使えたらなって思います。