TL;DR

スクロールスパイを入れたかったので、入れてみた。
もともとvue-scrolltoを入れてスムーススクロールは実装していたのだが、共存させて見たら思いのほかうまく言ってかっこよくなったので記事に残す

成果物

技術スタック

スムーススクロール：vue-scrollto
https://www.npmjs.com/package/vue-scrollto
スクロールスパイ：v-b-scrollspy (bootstrap-vue)
https://bootstrap-vue.org/docs/directives/scrollspy

やり方

まずは普通にvue-scrolltoをyarn add

yarn add vue-scrollto

こちらはVueのライブラリなのでNuxtで使うためにPluginにする
pluginsフォルダにvue-scrollto.jsを作成

import Vue from 'vue'
import VueScrollTo from 'vue-scrollto'

Vue.use(VueScrollTo, {
 duration: 700,
 easing: [0, 0, 0.1, 1],
 offset: -200,
})

目次の作り方自体は過去の説明記事から
https://blog.utautattaro.com/post/kvawuzxju

vue-scrolltoはv-scroll-to要素にidを挿入し、to オプションを付与する必要があるのでハッシュリンクを以下のように修正

<b-list-group-item class="py-1 tablelist" v-bind:class="'t'+table.tag" v-scroll-to="table.id" v-for="table in tableofcontent" to v-bind:href="table.id" v-html="table.text"></b-list-group-item>

hrefは何も入れなくても動くのだが後述するv-b-scrollspyのために入れておく
入れてもスムーススクロールは問題なく動く

次にv-b-scrollspyの設定。
v-b-scrollspyを実行するには以下の4つの条件が揃う必要がある

• スパイした結果を表示するDOMグループはb-navかb-list-groupである必要がある
• スパイ対象のDOMはposition: relative;である必要がある
• スパイ対象がbodyでない場合はoverflow-y:scroll;を追加する必要がある
• スパイした結果を表示するDOMはhrefを有している必要があり、スパイ対象と同一でなければならない

今回は記事内をスパイしたかったが、記事単体にoverflow-y:scroll;を設定していまうと不要なところにスクロールバーが出てしまうのでbodyをスパイ対象とした。

使い方は、スパイした結果を表示するDOMグループにv-b-scrollspy="250"を要素として設定すればOK
引数に数値を指定することでそれがoffsetの値になる。vue-scrolltoと完全に一致しないので微調整済み

これでスパイが実行され、閲覧中のidをhrefに持ったポインタDOMがclassにactiveが追加される。