ウィンドウのスクロールに対応してTOPへを表示

投稿日: 2013年9月9日 作成者: alphasis

ページのトップへスクロールして戻る「TOPへ」ボタンを、ウィンドウのスクロールに応じて表示するサンプル。

実装例

実装例は、サンプルページにて。

実装例（サンプル）の動作について

  1. このページを半分ほど縦スクロールすると、「TOPへ」ボタンが現れる。
  2. 「TOPへ」ボタンをクリックすると、ページのトップへスクロールして戻り、「TOPへ」ボタンは消える。

ソースコード

JavaScript

<script type="text/javascript">
window.onload = function(){
    var $body = document.getElementsByTagName( "body" );
    var $toTheTop = document.getElementById( "toTheTop" );
    $toTheTop.style.visibility = "hidden";
    window.onscroll = function(){
        if( window.pageYOffset > ( $body[0].scrollHeight - window.innerHeight ) / 2 ){
            $toTheTop.style.visibility = "visible";
        }else{
            $toTheTop.style.visibility = "hidden";
        }
    }
    $toTheTop.onclick = function(){
        window.scrollTo( 0, 0 );
    }
}
</script>

HTML

<p id="toTheTop">TOPへ</p>

CSS

<style>
#toTheTop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: block;
    width: 80px;
    margin: 0;
    padding: 20px 10px;
    background-color: gold;
    color: red;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
}
</style>

スポンサード リンク

カテゴリー: JavaScript, スクロール, 逆引き パーマリンク