直播源码开发,页面回到顶部(平缓滚动效果)

直播源码开发,页面回到顶部(平缓滚动效果)

 common.js

 

1
<br>// 页面回到顶部(滚动效果)<br>export const handleScroll = () =>{<br>    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;<br>    console.log(scrollTop, "scrollTop");<br>    if (scrollTop > 0) {<br>        const timeTop = setInterval(() =>{<br>            document.documentElement.scrollTop = document.body.scrollTop = scrollTop -= 50; //一次减50往上滑动<br>            if (scrollTop <= 0) {<br>                clearInterval(timeTop);<br>            }<br>        },<br>        10); //定时调用函数使其更顺滑<br>    }<br>};

xxx.vue文件 

 

1
<br><script setup><br>import { handleScroll } from '@/util/common'<br>import { reactive, toRefs, onBeforeMount, onMounted, computed } from 'vue'<br> <br>onMounted(async () => {<br>//监听滚动事件<br>window.addEventListener('scroll', handleScroll, { once: true })<br>})<br></script>

 

 以上就是直播源码开发,页面回到顶部(平缓滚动效果), 更多内容欢迎关注之后的文章

 

posted @   云豹科技-苏凌霄  阅读(17)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示