🔽
Vueでページを特定要素までスクロールさせるボタンを実装してみた
動機
LPとかでよくある押すとそのボタンに対応したセクション（要素）までスクロール移動する動作をVueで実現したかったので調べてみ見ました。しかし、検索が下手なのかもしれませんが、ちょうどいい記事が見つけられなかったので今回やってみた実装方法を書いておこうと思います。
コード
めちゃ簡単に実装できたので早速サンプルコードです。
<template>
<div>
<button @click="scrollToTarget">Scroll To Target</button>
<div class="content" v-for="n in 50" :key="n">
<p>Content {{ n }}</p>
</div>
<div ref="target">Target</div>
</div>
</template>
<script setup>
import { ref } from "vue";
const target = ref(null);
const scrollToTarget = () => {
if (target.value) {
target.value.scrollIntoView({
behavior: "smooth",
});
}
};
</script>
<style scoped>
.content {
margin: 100px 0;
}
</style>
単にscrollIntoView()を使っているだけです。知っていれば簡単ですが、JavaScriptの関数に詳しくない自分にとってはこうやってフレームワークと一緒に使っている例があると助かるので、サンプルコードを公開することにしました。
ヘッドレスCMSを使ったブログサイトのフロントエンドをNuxt.js使って開発している時なんかに参考にしていただければ幸いです！
Discussion