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返回顶部按钮内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue项目tween方法实现返回顶部的示例代码

    一.场景 tween.js是一款可生成平滑动画效果的js动画库 当你要实现一个返回顶部的功能时候你会怎么做,大部分人会使用document.body.scrollTop =0:这么写就实现了功能, 不过要更加的细腻一点我们不妨用tween的缓动来实现,看看效果如何吧. 之前我们写过tween的相关文章,这里不做介绍了. 二.代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l

  • vue实现移动端返回顶部

    本文实例为大家分享了vue实现移动端返回顶部的具体代码,供大家参考,具体内容如下 HTML: <template> <div class="home"> <div v-for="ys in 100" :key="ys"> <p>1</p> </div> <div @click="back" class="back1" v-show

  • Vue实现一个返回顶部backToTop组件

    Vue实现一个返回顶部backToTop组件

    最近在学习VUE.自己就在研究怎么用VUE实现一个组件的封装,今日就算留个笔记 前言 返回顶部这个功能用jq实现,好容易实现,一个animate配合scrollTo就搞定了 今天我们来试试vue封装一个原生js实现的返回顶部; 写起来够呛,借助github,看了别人的gist,稍微封装了下; 当然不是用scrollTo直接调位那种,没有过渡效果怎么说得过去!!还是捣鼓出来了. 废话不多说,看效果图- 效果图 实现思路 过渡用的是requestAnimationFrame,这货只支持IE10+,所

  • vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法

    这里是本小白使用时遇到的问题及个人使用的方法可能并不完美. 1.监测浏览器滚动条滚动事件及滚动距离 dmounted() { window.addEventListener("scroll", this.gundong); }, destroyed() { window.removeEventListener("scroll", this.gundong); }, methods: { gundong() { var dis = document.documentE

  • Vue实现返回顶部按钮实例代码

    前言 本文主要介绍了Vue 实现返回顶部按钮的方法,下面话不多说,来直接看代码吧 实例代码: <template> <div class="scrollTop"> <div class="backTop" @click="backTop"> <button v-show="flag_scroll"> 返回顶部 </button> </div> //数据源

  • javascript简单实现跟随滚动条漂浮的返回顶部按钮效果

    javascript简单实现跟随滚动条漂浮的返回顶部按钮效果

    本文实例讲述了javascript简单实现跟随滚动条漂浮的返回顶部按钮效果.分享给大家供大家参考,具体如下: 比较优秀的一款超过一屏高度才显示的,跟随滚动条漂浮的返回顶部按钮特效代码. 运行效果如下图所示: 完整实例代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quo

  • JavaScript实现返回顶部按钮

    JavaScript实现返回顶部按钮

    本文实例为大家分享了JavaScript实现返回顶部按钮的具体代码,供大家参考,具体内容如下 1.先搭架子 a { text-decoration: none; } body { height: 5000px; } .backtotop { position: fixed; bottom: 80px; right: 80px; width: 80px; height: 80px; background-color: #ccc; font-size: 20px; text-align: cente

  • JavaScript实现返回顶部按钮案例

    JavaScript实现返回顶部按钮案例

    本文实例为大家分享了JavaScript实现返回顶部按钮的具体代码,供大家参考,具体内容如下 思路: 首先先设计出其静态样式,这里主要利用固定定位,将其固定在页面底部的某一位置处 .backtotop { position: fixed; bottom: 80px; right: 80px; width: 80px; height: 80px; background-color: #ccc; font-size: 20px; text-align: center; padding-top: 12

  • 基于Javascript实现返回顶部按钮

    基于Javascript实现返回顶部按钮

    一个网页内容一多, 就会分屏显示数据, 如果屏目很多, 用户访问的数据已经到了页面的底部, 这时候返回到顶部也是需要一点时间. 这样对用户体验来说, 可能就稍微逊了一点. 所以页面数据多的网页, 现在都会用一个"返回顶部"按钮来快速跳转到网页的顶部. 那现在我们就来实现这么一个功能. 这个页面我们就不写什么数据, 直接就加入一个a标签来作为返回顶部的按钮, 并给他一个class名称:top. <a href="#" class="top"&

  • javascript中返回顶部按钮的实现

    炫酷的返回顶部功能 js核心代码 window.onscroll = function(){ var t = document.documentElement.scrollTop || document.body.scrollTop; var top_div = document.getElementById( "go" ); if( t >= 300 ) { top_div.style.display = "block"; } else { top_div.

  • Android仿微信右滑返回功能的实例代码

    Android仿微信右滑返回功能的实例代码

    先上效果图,如下: 先分析一下功能的主要技术点,右滑即手势判断,当滑到一直距离时才执行返回,并且手指按下的位置是在屏幕的最左边(这个也是有一定范围的),  这些可以实现onTouchEvent来实现. 接着就是返回时,有滑动效果,很显然这个是Acitivty切换动画实现的.好啦,分析完了就开干.下面上代码: @Override public boolean onTouchEvent(MotionEvent event) { switch (event.getAction()){ case Mot

  • vue超时计算的组件实例代码

    vue超时计算的组件实例代码

    需要对预约单进行超时计算,但是后台和客户端时间不能保证一定一直,所以后台返回客户提交时间和请求结束时间的时间差进行计算. 效果如下(此处只是demo效果,所以有点丑.) 父页面 <template> <div> <div class="dateDiv" :key="index" v-for="(item,index) in TimeArray"> <p>{{item.name}}</p>

  • Android仿微博个人详情页滚动到顶部的实例代码

    个人详情页滑动到顶部 最近产品提了个新需求,需要实现点击App内的某个按钮跳转到个人详情页并且滑动到顶部,个人详情页的页面交互稍微复杂,技术角度上包含了状态栏颜色变换,view滑动联动等问题,技术实现上采用了Google出的CoordinatorLayout那套组件,由于App的个人详情页跟微博的相似,这里就拿微博为例来描述.微博默认的效果以及手动滑动到顶部的效果图如下. 个人详情页技术实现分析: 先看看xml布局的伪代码: <?xml version="1.0" encodin

随机推荐