単語登録しておきたいウェブパーツ（ページ上部へ）

luck

5年前

注意点

・jqueryを使用していますのでご利用の際はjqueryを合わせて読み込んでください
※バージョンは「1.12.4」で確認しています
・スムーズなスクロールは標準で実装しています。→こちらをご確認ください
・単語登録は「PhraseExpress」を使用しています

ページ上部へ

サイトのページ右下などにあるボタンです。「▲」や「↑ページ上部へ」などで見かけることが多いです。

クリックするとページの上部へ自動スクロールされます。作成するサイトには基本的に設置しますので、単語登録しています。

ウェブパーツを呼び出すための単語

pagetop;
※参考までに

登録しているソース

※ソースをクリックするとコピーできます

<div class="pagetop"><a class="rollover" href="#"><img src="img/pagetop.png" alt="上へ"></a></div>

/*----------------------------------------------------
 pagetop
----------------------------------------------------*/
.pagetop {
    opacity: 0;
    position: fixed;
    right: 20px;
    bottom: 20px;
            transition: all 0.5s;
    -webkit-transition: all 0.5s;
}

.scroll .pagetop {
    opacity: 1;
}

jQuery(document).ready(function($){
    /*----------------------------------------------------
     pagetop
    ----------------------------------------------------*/
    $(window).on('load scroll', function() {
        var value = $(this).scrollTop();
        if ( value > 0 ) {
            $('body').addClass('scroll');
        } else {
            $('body').removeClass('scroll');
        }
    });
});

使い方

必要なhtml、css、javascriptを一括で登録しています。それぞれ使用する箇所へカット＆ペーストして使用しています。
alt属性や画像パス、ボタン位置などは貼り付けた後に調整します。

また、javascriptによって、少しでもスクロールするとボタンが表示されるように作成しています。一番上までスクロールしているとボタンは非表示になります。

html

<div class="pagetop"><a class="rollover" href="#"><img src="img/pagetop.png" alt="上へ"></a></div>

css

/*----------------------------------------------------
 pagetop
----------------------------------------------------*/
.pagetop {
    opacity: 0;
    position: fixed;
    right: 20px;
    bottom: 20px;
            transition: all 0.5s;
    -webkit-transition: all 0.5s;
}

.scroll .pagetop {
    opacity: 1;
}

javascript（jQuery使用）

jQuery(document).ready(function($){
    /*----------------------------------------------------
     pagetop
    ----------------------------------------------------*/
    $(window).on('load scroll', function() {
        var value = $(this).scrollTop();
        if ( value > 0 ) {
            $('body').addClass('scroll');
        } else {
            $('body').removeClass('scroll');
        }
    });
});