Alt-k
6/18/2019 - 7:54 AM

page topへ戻るボタン

参考URL http://serinaishii.hatenablog.com/entry/2015/11/06/%E8%B6%85%E7%B0%A1%E5%8D%98%26%E3%82%B3%E3%83%94%E3%83%9A%E3%81%A7OK%EF%BC%81%E3%83%9A%E3%83%BC%E3%82%B8%E3%83%88%E3%83%83%E3%83%97%E3%81%B8%E6%88%BB%E3%82%8B%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%AE#

index.html
content_copyfile_download
<p id="pageTop"><a href="#"><i class="fa fa-chevron-up"></i></a></p>
（footer手前に記述）
style.css
content_copyfile_download
#pageTop {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
}

#pageTop a {
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
  border-radius: 3rem;
  width: 3.5rem;
  height: 3.5rem;
  background-color: #00188b;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
}

#pageTop a:hover {
  text-decoration: none;
  opacity: 0.7;
}
common.css
content_copyfile_download
//■page topへ戻るボタン
$(function () {
    var topBtn = $("#pageTop");
    topBtn.hide();
    //◇ボタンの表示設定
    $(window).scroll(function () {
        if ($(this).scrollTop() > 80) {
            //---- 画面を80pxスクロールしたら、ボタンを表示する
            topBtn.fadeIn();
        } else {
            //---- 画面が80pxより上なら、ボタンを表示しない
            topBtn.fadeOut();
        }
    });
    // ◇ボタンをクリックしたら、スクロールして上に戻る
    topBtn.click(function () {
        $("body,html").animate(
            {
                scrollTop: 0,
            },
            500,
        );
        return false;
    });
});