HTML 備忘録：ページ先頭にジャンプ

日付:
WEBページで、縦スクロールが長い場合、途中でスクロール機能を使わずにページ先頭に戻りたい場合があります。
例えば、

   http://webdesignerwall.com/demo/scroll-to-top/scrolltotop.html

のように、ページ先頭に戻るためのボタンがあるととても便利です。

html ファイルの記述

<head>
...
<link href="css/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="scripts/pagetop.js" type="text/javascript"></script>
...
</head>


<body>
...
<a name="TOP"></a>
...
<header>
...
<p id="pagetop"><a href="#top">PAGE TOP ▲</a></p>
<footer>
...



pagetop.js Java スクリプトの記述


$(document).ready(function(){
        // 隠す
        var pageTop = $('#pagetop');
        $(pageTop).hide();

        $(function () {
                // フェードインする条件
                $(window).scroll(function () {
                        if ($(this).scrollTop() > 1000) {
                                $(pageTop).fadeIn();
                        } else {
                                $(pageTop).fadeOut();
                        }
                });

                // 先頭に戻るときのアニメーション表示
                pageTop.click(function () {
                        $('body,html').animate({
                                scrollTop: 0
                        }, 100);
                        return false;
                });
        });
});



style.css スタイルシートの記述


/* ページの先頭に戻る */
#pagetop {
        display: block;
        position: fixed;
        bottom: 24px;
        right: 40px;
}

#pagetop a {
        display: block;
        background-color: #9FD6D2;
        text-align: center;
        color: #fff;
        font-size: 14px;
        text-decoration: none;  /* 下線を消す */
        padding: 5px 10px;
        filter:alpha(opacity=80);
        -moz-opacity: 0.8;
        -khtml-opacity: 0.8;
        opacity: 0.8;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        font-weight: bold;
}

#pagetop a:hover {
        background-color: pink;
        color: #000;
        /* background color transition */
        -webkit-transition: 1s;
        -moz-transition: 1s;
        transition: 1s;
}