Edited at

Nuxt.js scrollBehaviorが効かない時

Nuxt.jsでページ遷移時に設定した scrollBehavior にしていた挙動が動かなくなりました。

原因としては全体に関わるcss内で、modal表示にその背景となるページをスクロールさせないために


html, body {
overflow: auto;
height: 100%;
}

としていたのがよくなかった模様。

なのでmodal表示時のみに上記の指定をさせるために


html.modalopen, body.modalopen {
overflow: auto;
height: 100%;
}

とクラスを設定し、modal表示時にpage componentに


pages/contact.vue


head() {
return {
htmlAttrs: {
class: this.isModal ? 'modalopen' : ''
},
bodyAttrs: {
class: this.isModal ? 'modalopen' : ''
},
...

としてbodyとhtml要素にクラスを設定するようにしました。

ほかにもhead の属性も操作できる模様。

こちらを参考にさせていただきました。 

https://qiita.com/ykoizumi0903/items/c79b577d6ca52cec6295

https://nuxtjs.org/guide/views#app-template