はじめに
実現したいこと
あるボタンを押すと、画面一番上に移動するような動作（画面遷移はしない）
やり方を探ってみる
「Vue.js トップに戻るボタン」とかで検索すると、ほとんどが👇のようなwindow.scrollToを使ったようなやり方でした。
<template>
<div>
<button @click="moveToTop">一番上に</button>
</div>
</template>
<script>
moveToTop() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
}
</script>
なぜかwindow.scrollTo反応しない
が！！！
なんでやろう？？僕が実装したいVue.jsのプロジェクトでは、window.scrollToが全く反応してくれなかったのですね。。。
👇これも試しました。。
👇の例で使われてるwindow.scrollByも全く反応がなかったので、、、windowの時点で何かしらの理由があって無効になっていると仮定しました
scrollIntoViewを代わりに使いましょう！
色々と調べまくってる時でに運命的な出会いをしました。。
ここでscrollIntoViewを知りました！
そこからどうやって実装したか？
一番上の階層のvueファイルでid="page-top"を指定
Layout.vue
<template>
<div>
<div class="page-content-wrapper" id="page-top">
<Sample></Sample>
</div>
<FooterVue></FooterVue>
</div>
</template>
<script>
import FooterVue from './_partials/Footer';
import Sample from './_partials/Sample';
export default {
components: {
'FooterVue': FooterVue,
'Sample': Sample
},
}
// 省略
</script>
コンポーネントファイルでmethodを入れる
sample.vue
<template>
<div>
<button @click="moveToTop">
次へ
</button>
</div>
</template>
<script>
export default {
methods: {
moveToTop() {
document.getElementById('page-top').scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
}
// 省略
</script>
これでwindow.scrollToと同じようなことが実現できました
わーい！！
注意点
scrollIntoViewはoffsetが使えません（もうちょっと移動した時の位置を上にしたい！とかが無理っぽい）
まぁそれでも一番上に移動させるだけなら全く問題はありません。