scrollIntoViewメソッドで滑らかな縦スクロールを実装する

# はじめに
特定の要素までスクロールするための実装方法として、[scrollIntoView() メソッド](https://developer.mozilla.org/ja/docs/Web/API/Element/scrollIntoView) があります。
本記事ではボタンが押下されたことをトリガーとし、scrollIntoViewを使って任意の位置までの滑らかな縦スクロールを実装します。

# behavior: 'smooth'
behavior: 'smooth' を指定すると任意の要素までの滑らかなスクロールを実装できます。

・[ブラウザの互換性](https://developer.mozilla.org/ja/docs/Web/API/Element/scrollIntoView#%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%83%BC%E3%81%AE%E4%BA%92%E6%8F%9B%E6%80%A7)

:::note info
instant、autoは瞬時に任意の位置に移動。
:::


# blockオプション
- nearest：最も近い位置までスクロール（`start` or `end` が適用）
- start：要素の上端がビューポートの上端に合うようにスクロール
- center：要素がビューポートの中央に位置するようにスクロール
- end：要素の下端がビューポートの下端に合うようにスクロール

https://developer.mozilla.org/ja/docs/Web/API/Element/scrollIntoView#block

# 動かしてみる

文字だけだとイメージがつきにくいので実際に動かしてみます。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="WNBJooV" data-pen-title="scrollViewSample" data-user="enumura" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/enumura/pen/WNBJooV">
  scrollViewSample</a> by enumura (<a href="https://codepen.io/enumura">@enumura</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


# ソース
<details><summary>index.html</summary>

```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>scrollIntoView デモ</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div class="button-container">
        <button id="scrollButton1">Scroll:Auto+Nearest</button>
        <button id="scrollButton2">Scroll:Smooth+Start</button>
        <button id="scrollButton3">Scroll:Smooth+Center</button>
        <button id="scrollButton4">Scroll:Smooth+End</button>
    </div>
    <div class="content">
        <div id="targetElement" class="target">スロール先のターゲット</div>
    </div>
    <script src="script.js"></script>
</body>
</html>
```
</details>

<details><summary>index.css</summary>

```css:index.css
body {
  background-color: lightblue;
}
.content {
  height: 1500px;
  padding-top: 50px;
}
.target {
  text-align: center;
  margin-top: 1000px;
  padding: 20px;
  background-color: lightcoral;
}
button {
  width: 70%;
  padding: 10px 20px;
  margin: 5px;
}
.button-container {
  position: fixed;
  flex-wrap: wrap;
  top: 10px;
  left: 10px;
  display: flex;
  gap: 10px;
}
```

</details>


<details><summary>scripts.js</summary>

```javascript:scripts.js
// ボタンとターゲット要素を取得
const button1 = document.getElementById('scrollButton1');
const button2 = document.getElementById('scrollButton2');
const button3 = document.getElementById('scrollButton3');
const button4 = document.getElementById('scrollButton4');
const targetElement = document.getElementById('targetElement');

// ボタン1：スムーズにスクロールし、ターゲット要素が最も近い位置に表示
button1.addEventListener('click', function() {
    targetElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
});

// ボタン2：スムーズに上部までスクロール
button2.addEventListener('click', function() {
    targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
});

// ボタン3：スムーズに中央までスクロール
button3.addEventListener('click', function() {
    targetElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
});

// ボタン4：スムーズに下部までスクロール
button4.addEventListener('click', function() {
    targetElement.scrollIntoView({ behavior: 'smooth', block: 'end' });
});
```

</details>



# 参考

https://developer.mozilla.org/ja/docs/Web/API/Element/scrollIntoView

https://zenn.dev/kasaji/articles/scroll-into-view