单击锚链接时平滑滚动

Question

当我们点击锚链接时，是否有一个组件/实用程序可以帮助平滑滚动(例如。，https://www.w3schools.com/howto/howto_css_smooth_scroll.asp#section2(在Quasar？

Answer 1

有一种方法scrollIntoView提供类似类型的功能。

<div ref="about">
about
</div>
<div ref="projects">
projects
</div>
<div class="text-color q-mx-md cursor-pointer text-weight-bolder" @click="$root.$emit('goAbout')">01. About</div>
<div class="text-color q-mx-md cursor-pointer text-weight-bolder" @click="$root.$emit('goProjects')">02. Projects</div>

methods: {
go(ref) {
this.$refs[ref].scrollIntoView({
behavior: 'smooth',
block: 'start',
inline: 'start'
})
},
},
mounted() {
this.$root.$on('goAbout', this.go.bind(this, 'about'));
this.$root.$on('goProjects', this.go.bind(this, 'projects'));
}