Blog スタッフブログ

[WordPress]ページの一番下からボタンを押して一番上にスクロールさせる方法

こんにちは、WEB開発のTYです。

ページの一番下からボタンを押して一番上にスクロールさせる方法に関して記載致します。

まずはfooterあたりにpagetopを置いてください（画像やアイコンでも可）。

今回は画像で設置致しました

<div id="page-top">
    <a href="#pagetop" class="scroll"><img class="img-responsive" src="images/pagetop.png" alt=""></a>
 </div>

CSSでは

#page-top {
	position:relative;
  opacity: 1 !important;
  display: block !important;
}

#page-top a {
		position:fixed;
		right:15px;
		bottom:41px;
		z-index: 100000;
    max-width: 40px !important;
    max-height: 40px !important;
}

そしてjsファイルには

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

こちらでpagetopの画像を押せばページの一番上にスクロールされます。

戻る一覧へ戻る