jQueryでウィンドウのスクロールに対応してTOPへをフェードイン表示する方法

jQueryを使い、ページのトップへスクロールして戻る「TOPへ」ボタンを、ウィンドウのスクロールに応じてフェードイン表示する方法。

実装例

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

実装例(サンプル)の動作について

  1. サンプルページを半分ほど縦スクロールすると、「TOPへ」ボタンが、ウィンドウの右下にフェードインで現れる。
  2. 「TOPへ」ボタンをクリックすると、ページのトップへスクロールして戻り、「TOPへ」ボタンは、フェードアウトする。

ソースコード

JavaScript

<script type="text/javascript">
jQuery( function() {
    jQuery( '#toTheTop' ).hide();
    jQuery( window ).scroll( function () {
        if( jQuery( window ).scrollTop() > ( jQuery( 'body' ).height() - jQuery( window ).innerHeight() ) / 2 ){
            jQuery( '#toTheTop' ).fadeIn( 'slow' );
        }else{
            jQuery( '#toTheTop' ).fadeOut( 'slow' );
        }
    } );
    jQuery( '#toTheTop' ).click( function () {
        jQuery( window ).scrollTop( 0 ).scrollLeft( 0 );
    } );
} );
</script>

使用している主なjQuery api

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>

スポンサード リンク

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