如何用Vue编写一个实现返回顶部的长尾词按钮？

本文共计239个文字，预计阅读时间需要1分钟。

前言：本文主要介绍了Vue实现返回顶部按钮的方法，下面直接看代码实例：

前言

本文主要介绍了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>

总结

到此这篇关于Vue实现返回顶部按钮的文章就介绍到这了,更多相关Vue返回顶部按钮内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！