スクロールトップ - Javascript

  • 作成日：
  • 最終更新日：2025/06/25

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

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

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="/javascripts/jssample/scrolltop.js"></script>
  <link rel="stylesheet" href="/stylesheets/jssample/scrolltop.css">
  <title>Document</title>
</head>
<body>
  <main>
    <h1>ページトップ</h1>
  </main>
  <div id="jewelry" class="clearfix">
    <div id="scroll_btn_box">
      <p id="scroll-top-btn">Top</p>        
    </div>
  </div>
</body>
</html>

CSS

.clearfix:after {
  content: "";
  clear: both;
  display: block;
}
main {
  height: 2000px;
}
/* jewelry */
#jewelry {
  position: fixed;
  right: 10px;
  bottom: 10px;
  display: table;
  border-collapse: separate;
}
#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;
}