我们在浏览网页的时候经常看到回到顶部这个功能，这个功能也比较简单，今天我就介绍一下这个功能如何实现。

使用scrollTop实现

首先，我来简单介绍一下原理

        1.根据网页的滚动高度，判断是否显示回到顶部功能按钮

        2.点击按钮时，触发回到顶部事件，如果要追求视觉效果的话，可以加入定时器。

下面简单介绍下代码实现

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
</head>
<style>
    #app>div{
        width: 100px;
        height: 100px;
        background: pink;
    }
    button{
        position: fixed;
        right: 100px;
        bottom:100px;
    }
</style>
<body>
    <div id="app">
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <button @click="backTop" v-if="showBtn">回到顶部</button>
    </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return { showBtn: false }
        },
        methods: {
            // 展示回到顶部按钮
            showbtn() {
                let that = this;
                let scrollTop =
                    window.pageYOffset ||
                    document.documentElement.scrollTop ||
                    document.body.scrollTop;
                that.scrollTop = scrollTop;
                if (scrollTop > 750) {
                    this.showBtn = true;
                } else {
                    this.showBtn = false;
                }
            },
             /*回到顶部实现过程注解：
                1.获取当前页面距离顶部的距离
                2.计算出每次向上移动的距离，用负的滚动距离除以5，因为滚动的距离是一个正数，想向上移动就是一个减法
                3.用当前距离加上计算出的距离，然后赋值给当前距离，就可以达到向上移动的效果
                4.最后在移动到顶部的时候，清除定时器*/
            backTop() {
                var timer = setInterval(function () {
                    let osTop =
                        document.documentElement.scrollTop || document.body.scrollTop;
                    let ispeed = Math.floor(-osTop / 5);
                    document.documentElement.scrollTop = document.body.scrollTop =
                        osTop + ispeed;
                    this.isTop = true;
                    if (osTop === 0) {
                        clearInterval(timer);
                    }
                }, 30);
            },
        },
        mounted() {
            window.addEventListener("scroll", this.showbtn, true);
        },
    })
</script>

</html>

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue