ページのトップへ戻るボタンsampleコード

html関連 css関連 javascript関連
2023年3月18日

いつも忘れるのでコピペできるように！

HTML

1
<div id="page-top"><a href="#header"><span></span></a></div>

scss
こちらは矢印をcssで設定しているのでちょっと長くなっているがAwesome等でアイコンを読み込む方法もあり。その場合はa:hoverの設定を忘れないように。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/*   page-top   */
#page-top {
  bottom: 30px;
  position: fixed;
  right: 10px;
  z-index: 888;
a {
  display: block;
  padding: 5px 0;
  width: 60px;
  height: 60px;
  text-decoration: none;
  border-radius: 50%;
  position: relative;
}
span {
  display: block;
  width: 30px;
  height: 30px;
  top: 22px;
  left: 0;
  right: 0;
  margin: auto;
  border-top: 1px solid #191919;
  border-left: 1px solid #191919;
  -webkit-transform: translate3d(0,0,0) rotate(45deg);
  transform: translate3d(0,0,0) rotate(45deg);
  box-shadow: 1px 1px 0 1px #FFF inset;
  position: absolute;
}
}

javascript

1
2
3
4
5
6
7
8
9
10
11
12
jQuery(function() {
//page-top
    const TopBtn = jQuery('#page-top');  
    TopBtn.hide();
        jQuery(window).scroll(function () {
        if (jQuery(this).scrollTop() > 100) {
            TopBtn.fadeIn();
        } else {
            TopBtn.fadeOut();
        }
    });
});