Jquery

Jquery

go top buttonのJquery

==CSS==

div.tothetopfixed {
    position: fixed;
    right: 15px;
    bottom: 20px;
    z-index: 1500;
}  

div.tothetopfixed a {
    display: block;
    color: #ffffff;
    padding: 10px;
    margin: 0;
    background-color: #FE2E2E;
    border-radius: 5px;
    font-size: 0.8em;
}

div.tothetopfixed a:hover {
    background: #0044CC;
    color: #ffffff;
}

===========================こここまで

<head></head>に
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
    var showFlug = false;
    var topBtn = $(&#39;.tothetopfixed&#39;);
    //最初はボタン位置をページ外にする
    topBtn.css(&#39;bottom&#39;, &#39;-100px&#39;);
    var showFlug = false;
    //スクロールが100に達したらボタン表示
    $(window).scroll(function () {
        if ($(this).scrollTop() &gt; 100) {
            if (showFlug == false) {
                showFlug = true;
                topBtn.stop().animate({&#39;bottom&#39; : &#39;20px&#39;}, 200);
            }
        } else {
            if (showFlug) {
                showFlug = false;
                topBtn.stop().animate({&#39;bottom&#39; : &#39;-100px&#39;}, 200);
            }
        }
    });
    //スクロールしてトップに戻る
    //500の数字を大きくするとスクロール速度が遅くなる
    topBtn.click(function () {
        $(&#39;body,html&#39;).animate({
            scrollTop: 0
        }, 500);
        return false;
    });
});

</script>

で＜/Body>の直前に
<div class='tothetopfixed'>
<a href='#header'>Go Top&#8593;</a>
</div>    <!--- end [tothetopfixed] -->

PAGE TOP