单击锚链接时平滑滚动

【问题标题】：Smooth scrolling when clicking on anchor link单击锚链接时平滑滚动
【发布时间】：2021-12-25 10:50:41
【问题描述】：

当我们单击 Quasar 中的锚链接（例如，https://www.w3schools.com/howto/howto_css_smooth_scroll.asp#section2）时，是否有组件/实用程序有助于平滑滚动？

【问题讨论】：

【解决方案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'));
}

【讨论】：