公開日:2021/05/23
最終更新日:2022/06/01

JS TOPへ戻るボタン作成（スムーズスクロール）

はい、今回はいわゆる「トップへ戻るボタン」、

通称スムーズスクロールなるものを本サイトに実装すべく、

javascriptを書いていきます

今回は結論から単純に明示します

javascriptの公式MNDに乗っているメソッドです

const pageTopScroll = document.getElementById('scroll_top');
pageTopScroll.addEventListener('click',() => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
})

window.scrollToメソッドはwindow.scrollのエイリアス（別名のコピー）であるため同じように使用できます

複数のオプションを指定することが出来ます、その内容は、

left	水平方向の位置。
top	垂直方向の位置
behavior	※スクロール方法を下記のリストの中から文字列で指定する。
“auto”	デフォルトの挙動。”instant”と同じ。
“instant”	目的の位置まで瞬間的に移動する。
“smooth”	目的の位置までスムーズスクロールする。

はい。というわけで使用方法は一択ですね。

そして縦横軸の着地点の指定ですがこちらは数値でなくとも算出した変数でも可能なので応用が効きます

つまり上のコードはtop: 0,の位置まで、
behavior: ‘smooth’スムーズにスクロールするという指定になるということですね

さて珍しくCSSもしっかりと当てていきます

コピペ用！　どん！

#scroll_top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(50px);
}

#scroll_top {
  position: fixed;
  right: 4%;
  bottom: 18%;
  display: inline-block;
  background-color: $accent_color;
  color: $text_color2;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.4rem;
  padding-top: 0.6rem;
  box-shadow: 0px 0px 1px #BCBCB8;
  border: 0.3px solid #BCBCB8;
  writing-mode: vertical-rl;
  text-orientation: upright;
  transition: $anime;
  opacity: 0;
  visibility: hidden;
  text-decoration: none;
  &:hover {
    background-color: $main_color;
    color: $base_color;
  }
  &:before,&:after {
    content: '';
    position: absolute;
    background-color: $main_color;
    display: block;
    height: 45%;
    width: 2.5px;
  }
  &::before {
    left: 15%;
    top: -21%;
    transform: rotate(40deg);
  }
  &::after {
    right: 19%;
    top: -21%;
    transform: rotate(-40deg);
  }

}

JavaScritpで出現させるためのCSSも入っております

出現アニメーションは別に記事にしてあるため別途参照とします

またここからさらに応用してページ内リンクにも対応してみようと思います

それは次回ですね

今回はここまでにします