幽灵资源网 Design By www.bzswh.com
前言
本文主要介绍了Vue 实现返回顶部按钮的方法,下面话不多说,来直接看代码吧
实例代码:
<template> <div class="scrollTop"> <div class="backTop" @click="backTop"> <button v-show="flag_scroll"> 返回顶部 </button> </div> //数据源 <div></div> </div> </template> <script> export default { name: 'scrollTop', data() { return { flag_scroll: false, scroll: 0, } }, computed: {}, methods: { //返回顶部事件 backTop() { document.getElementsByClassName('scrollTop')[0].scrollTop = 0 }, //滑动超过200时显示按钮 handleScroll() { let scrollTop = document.getElementsByClassName('scrollTop')[0] .scrollTop console.log(scrollTop) if (scrollTop > 200) { this.flag_scroll = true } else { this.flag_scroll = false } }, }, mounted() { window.addEventListener('scroll', this.handleScroll, true) }, created() { }, } </script> <style scoped> .scrollTop{ width: 100%; height: 100vh; overflow-y: scroll; } .backTop { position: fixed; bottom: 50px; z-index: 100; right: 0; background: white; } </style>
总结
幽灵资源网 Design By www.bzswh.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
幽灵资源网 Design By www.bzswh.com
暂无评论...