单击锚链接时平滑滚动

Posted 2023-05-06

【中文标题】单击锚链接时平滑滚动

【英文标题】：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'));