スクロールトップ - javascript

ページの最初にスクロールして移動

javascript

window.onload = function(){
  function scroll_top(){
    window.scroll({top: 0, behavior: 'smooth'});
  };
  const scroll_top_btn = document.getElementById('scroll-top-btn');
  scroll_top_btn.addEventListener( 'click' , scroll_top );
}

HTML

<div id="jewelry" class="clearfix">
  <div id="scroll_btn_box">
    <p id="scroll-top-btn">Top</p>        
  </div>

  <div id="home_btn_box">
      <p id="home_btn"><a href="/">Home</a></p>
  </div>
</div>

CSS

/* jewelry */
#jewelry {
  position: fixed;
  right: 10px;
  bottom: 10px;
  display: table;
  border-collapse: separate;
  
}

#scroll_btn_box {
  display: table-cell;
  margin-right: 10px;
  border-spacing: 10px 0;
}
#scroll_btn_box p {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  border-radius: 50px;
  width: 50px;
  height: 50px;
  color: #ffffff;
  background-color: gray;
  cursor: pointer;
}
#home_btn_box {
  display: table-cell;
}
#home_btn_box p {
  display: table-cell;
}
#home_btn_box p a {
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  background-color: gray;
  border-radius: 50px;
  width: 50px;
  height: 50px;
  font-size: 14px;
  color: #ffffff;
  cursor: pointer;
}