ページ内をなめらかにスクロール移動させる

2023.10.20 09:00

2023.10.20 10:54

リンクをクリックしたら、ページ内の指定の場所にスムーズに移動させてみたいと思います。
jQueryを使わずに実現します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="style.css" type="text/css" media="all" />
</head>
  <body>
    <div class="links">
      <a href="#contents1">コンテンツ1</a>　
      <a href="#contents2">コンテンツ2</a>　
      <a href="#contents3">コンテンツ3</a>　
    </div>
    <div class="container">
      <div class="contents" id="contents1">
        コンテンツ
      </div>
      <div class="contents" id="contents2">
        コンテンツ2
      </div>
      <div class="contents" id="contents3">
        コンテンツ3
      </div>      
    </div>
    <script type="text/javascript" src="script.js"></script>
  </body>
</html>

  html, body {
    margin: 0;
    padding: 0;
  }
  body {
  }
  .container {
    padding: 1000px 0;
  }
  .contents {
    background-color: #eee;    
    height: 300px;
    margin: 0 auto 40px auto;
    width: 600px;
  }

// href="#"のaタグをすべて取得
const smoothScrollTrigger = document.querySelectorAll('a[href^="#"]');

// aタグすべてにクリックイベントを設定
for (let i=0; i < smoothScrollTrigger.length; i++) {

    // クリックされたら
    smoothScrollTrigger[i].addEventListener('click', (e) => {
        
      // ターゲットの位置を取得
      e.preventDefault();

      // 各a要素のリンク先を取得
      let href = smoothScrollTrigger[i].getAttribute('href');

      // リンク先の要素を取得
      let targetElement = document.getElementById(href.replace('#', ''));

      // ブラウザからの高さを取得
      const rect = targetElement.getBoundingClientRect().top;

      // 現在のスクロール量を取得
      const offset = window.pageYOffset;

      // 固定ヘッダー分の高さ
      const gap = 60;
      
      //最終的な位置を割り出す
      const target = rect + offset - gap;

      // スムースにスクロール
      window.scrollTo({
          top: target,
          behavior: 'smooth',
      });    
    });
}

無事実現できました！

今回は以上です！

参考：https://qumeru.com/magazine/293

ページ内をなめらかにスクロール移動させる

Category

Tag