平滑捲動效果 Smooth Scrolling

自訂滑動卷軸效果，點擊按鈕會平滑地滾動到指定位置。

建立一個連結和一個要滑過去的目標

<a href="#this-tag" @click.prevent="scrollTo('#that-tag')>按鈕</a>
...
<a href="#that-tag">錨點</a>

vue 自訂滑動方法

//comoponent

new Vue({
    el: '#app',
    method" {
        scrollTo(selector) {
            document.querySelector(selector).scrollIntoView( {behavior : 'smooth'} );
        }
    }
});

做成 vue component

<template>
    <a :href="href" @click.prevent="scroll">
        <slot></slot>
    </a>
</template>

<script>
    export default {
        props: ['href'],
        methods: {
            scroll() {
                // For older browsers, consider pulling in a polyfill.
                // https://www.npmjs.com/package/smoothscroll-polyfill
                document.querySelector(this.href)
                        .scrollIntoView({ behavior: 'smooth' });
            }
        }
    }
</script>