平滑捲動效果 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>







你可能感興趣的文章

第二天:環境建置

第二天:環境建置

React(8) - CSS in JS

React(8) - CSS in JS

Is the End of Data Analysis Near? The Impact of Code Interpreter, the New Feature of GPT-4

Is the End of Data Analysis Near? The Impact of Code Interpreter, the New Feature of GPT-4






留言討論