JavaScriptでスムーススクロールする

Nuxt.jsで開発している環境で、特定の場所にスムーススクロールしたいときに調べたことをまとめます。

プラグインを使う

おそらくこの辺りのプラグインが問題なく使えそう
nuxt-linkでスムーズスクロールするならvue-scrolltoが便利で気が利いている…と思う。
Nuxt.jsとvue2-smooth-scrollでスムーススクロールする

プラグインを使わずに実装したい

いろいろな問題から、新しいプラグインを追加することが望ましくない状況だったので、それくらいだったらプラグインいらないだろうと思い、どれがいいのか調べました。

scrollIntoView

おそらくこれが一番シンプルな実装ができる

必要な部分だけNuxt.jsで書いてます。

<template>
  <div @click="startScroll"></div>
  <div ref="targetContent"></div>
</template>

<script>
export default {
  methods: {
    startScroll() {
      this.$refs.targetContent.scrollIntoView({
        behavior: 'smooth',
        block: 'start'
      });
    }
  }
}
</script>

参考サイト：https://usefulangle.com/post/156/javascript-scroll-to-element#:~:text=Scrolling%20to%20an%20element%20can,scrolled%20to%20var%20element%20%3D%20document

ちゃんとスムーススクロールしますが、細かい調整ができません。
例えば特定のコンテンツの少し上で止めたいなど、 -30px などに対応できません。

上記のscrollIntoViewのあとに

window.scrollBy(0, -30); 

または

Element.scrollTop -= 30;

と追記すれば解決するとのアイデアもありますが、もっといい方法がありそうですよね。

scrollTo

これで解決しました！
scrollTo も behavior: 'smooth' が設定できました。
先入観で、スムースできないと思い込んでいたので、ぱっと出てこなかったですね・・

<template>
  <div @click="startScroll"></div>
  <div ref="targetContent"></div>
</template>

<script>
export default {
  methods: {
    startScroll() {
      window.scrollTo({
        top: this.$refs.targetContent.offsetTop-30,
        behavior: "smooth"
      });
    }
  }
}
</script>

たったこれだけです。
これくらいだったらやっぱプラグインじゃなくていいですね。

詳しくは参考サイトに書いてあるので割愛します。

参考サイト

https://www.to-r.net/media/smooth_scrolling_2019/
https://developer.mozilla.org/ja/docs/Web/API/Window/scrollTo