网站一键回到顶部

这里回到顶部用了2种方法。

        第一种方法 不需要外面包裹id生成的div （有直接和动画2种效果）

<template>
    <div class="img-style-footer" @click="gotop" v-show="showBackTop">
        <img style="width: 30px;height: 30px;" src="../../assets/backTop.png" alt="">
    </div>
    <div class="banner"></div>
</template>

<script setup>
import { ref } from 'vue';

//这里的代码保证在顶部是回滚按钮隐藏
// 使用 ref 定义一个响应式变量来控制是否显示回到顶部按钮
const showBackTop = ref(false);
// 监听滚动事件，根据滚动位置来决定是否显示回到顶部按钮
window.addEventListener('scroll', () => {
    showBackTop.value = window.scrollY > 0;
});


//直接回到顶部（类似于闪现）
const gotop = () => {
    // 点击回到顶部按钮时，将页面滚动到顶部
    window.scrollTo({
        top: 0,
    });
}

//使用平滑滚动效果回到顶部（有个缓慢的动画效果）
const gotop = () => {
    // 点击回到顶部按钮时，将页面滚动到顶部
    window.scrollTo({
        top: 0,
        behavior: 'smooth' // 使用平滑滚动效果
    });
}

</script>

<style lang="less" scoped>
.img-style-footer {
    z-index: 999;
    position: fixed;
    top: 50%;
    right: 16px;
    width: 46px;
    height: 46px;
    background: #505050;
    transform: translateY(-50%);
    box-shadow: 0px 0px 20px 0px rgba(216, 216, 216, 0.43);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.banner {
    width: 100%;
    height: 6000px;
    background-color: aquamarine;
}
</style>

        第二种 需要外面包裹id生成的div

                没有动画，直接闪现回到顶部

<template>
    <div id="backTop">
        <div class="img-style-footer" @click="gotop" v-show="showBackTop">
            <img style="width: 30px;height: 30px;" src="../../assets/backTop.png" alt="">
        </div>
        <div class="banner"></div>
    </div>
</template>

<script setup>
import { ref } from 'vue';

//这里的代码保证在顶部是回滚按钮隐藏

// 使用 ref 定义一个响应式变量来控制是否显示回到顶部按钮
const showBackTop = ref(false);
// 监听滚动事件，根据滚动位置来决定是否显示回到顶部按钮
window.addEventListener('scroll', () => {
    showBackTop.value = window.scrollY > 0;
});


const gotop = () => {
    const backTop = document.querySelector('#backTop')
    backTop.addEventListener('click', function () {
        document.documentElement.scrollTop = 0
    })
}

</script>

<style lang="less" scoped>
.img-style-footer {
    z-index: 999;
    position: fixed;
    top: 50%;
    right: 16px;
    width: 46px;
    height: 46px;
    background: #505050;
    transform: translateY(-50%);
    box-shadow: 0px 0px 20px 0px rgba(216, 216, 216, 0.43);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.banner {
    width: 100%;
    height: 6000px;
    background-color: aquamarine;
}
</style>

                加入动画，并且可以控制速度

<template>
    <div id="backTop">
        <div class="img-style-footer" @click="gotop" v-show="showBackTop">
            <img style="width: 30px;height: 30px;" src="../../assets/backTop.png" alt="">
        </div>
        <div class="banner"></div>
    </div>
</template>

<script setup>
import { ref } from 'vue';

//这里的代码保证在顶部是回滚按钮隐藏

// 使用 ref 定义一个响应式变量来控制是否显示回到顶部按钮
const showBackTop = ref(false);
// 监听滚动事件，根据滚动位置来决定是否显示回到顶部按钮
window.addEventListener('scroll', () => {
    showBackTop.value = window.scrollY > 0;
});


const gotop = () => {
    const backTop = document.querySelector('#backTop')
    backTop.addEventListener('click', function () {
        // 点击返回顶部按钮时触发滚动到顶部的操作
        scrollToTop()
    })
}

function scrollToTop() {
    const start = document.documentElement.scrollTop || document.body.scrollTop
    // 获取当前滚动位置
    const change = -start
    // 需要滚动的距离（从当前位置到顶部的距离）
    const increment = 20
    // 每次滚动的增量
    let currentTime = 0
    // 当前时间
    const duration = 500
    // 滚动时间，单位：毫秒

    // 缓动函数，实现平滑滚动效果
    const animateScroll = function () {
        currentTime += increment
        // 更新当前时间
        const val = Math.easeInOutQuad(currentTime, start, change, duration)
        // 根据缓动函数计算当前滚动位置
        document.documentElement.scrollTop = val
        // 设置滚动位置（针对不同浏览器）
        document.body.scrollTop = val
        // 如果当前时间小于滚动时间，继续执行动画
        if (currentTime < duration) {
            requestAnimationFrame(animateScroll)
        }
    }
    // 执行滚动动画
    animateScroll()
}

// 缓动函数 - 计算缓动效果的滚动位置
Math.easeInOutQuad = function (t, b, c, d) {
    t /= d / 2
    if (t < 1) return c / 2 * t * t + b
    t--
    return -c / 2 * (t * (t - 2) - 1) + b
}

</script>

<style lang="less" scoped>
.img-style-footer {
    z-index: 999;
    position: fixed;
    top: 50%;
    right: 16px;
    width: 46px;
    height: 46px;
    background: #505050;
    transform: translateY(-50%);
    box-shadow: 0px 0px 20px 0px rgba(216, 216, 216, 0.43);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.banner {
    width: 100%;
    height: 6000px;
    background-color: aquamarine;
}
</style>