Blog

HOME > Web > JQuery > 【jQuery】上に戻るボタンの表示

【jQuery】上に戻るボタンの表示

2014/11/21

JQuery

備忘録です。

ページをスクロールしたときに、右下に表示される「上に戻るボタン」の表示方法です。

当サイトの「上に戻るボタン」のソースコードを記載します。

HTML

<div id="page-top">
    <p><a href="#" id="move-page-top">▲</a></p>
</div>

▲を画像にしても大丈夫です。

CSS

#page-top {
    position: fixed;
    bottom: 10px;
    right: 20px;
    z-index:100;
}
#page-top a {
    background: #000 none repeat scroll 0 0;
    border:1px solid #fff;
    border-radius: 50%;
    display: block;
    padding: 5px 8px;
    text-align: center;
    width: auto;
    cursor:pointer;
    color:#fff;
    font-size:16px;
}
#page-top a:hover {
    text-decoration: none;
}

JS

<script type="text/javascript">
//スクロールトップ
$(function() {
    var topBtn = $('#page-top');   
    topBtn.hide();
    //スクロールが100pxに達したらボタン表示
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            topBtn.fadeIn();
        } else {
            topBtn.fadeOut();
        }
    });
    //スクロールしてトップ
    topBtn.click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 500);
        return false;
    });
});
</script>

HTML、CSS、JSの「#page-top」は任意で変更して構いません。

カテゴリー

月間アーカイブ

«前の記事

一覧に戻る

次の記事»

最近の投稿

人気の記事

MORE

ミュージシャンズ・プラザ

神社仏閣ホームーページ制作

ホームページ制作問合せ