Vue实现回到顶部和底部动画效果

本文实例为大家分享了Vue实现回到顶部和底部动画效果的具体代码,供大家参考,具体内容如下

代码:

<template>
 <div>
  <div class="scroll" :class="{show:isActive}">
   <div id="toTop" @click="toTop(step)"><</div>
   <div id="toBottom" @click="toBottom(step)">></div>
  </div>
 </div>
</template>
<script>
 export default{
  props:{
   step:{ //此数据是控制动画快慢的
    type:Number,
    default:50
   }
  },
  data(){
   return {
    isActive:false,
   }
  },
  methods:{
   toTop(i){
    //参数i表示间隔的幅度大小,以此来控制速度
    document.documentElement.scrollTop-=i;
    if (document.documentElement.scrollTop>0) {
     var c=setTimeout(()=>this.toTop(i),16);
    }else {
     clearTimeout(c);
    }
   },
   toBottom(i){
    var clientHeight=document.documentElement.clientHeight||document.body.clientHeight;
    var scrollHeight=document.documentElement.scrollHeight;
    var height=scrollHeight-clientHeight; //超出窗口上界的值就是底部的scrolTop的值
    document.documentElement.scrollTop+=i;
    if (document.documentElement.scrollTop<height) {
     var c=setTimeout(()=>this.toBottom(i),16);
    }else {
     clearTimeout(c);
    }
   }
  },
  created(){
   var vm=this;
   window.οnscrοll=function(){
    if (document.documentElement.scrollTop>60) {
     vm.isActive=true;
    }else {
     vm.isActive=false;
    }
   }
  }
 }
</script>
<style scoped>
 .scroll{
   position: fixed;
   right: 10px;
   bottom: 60px;
   width: 45px;
   height: 90px;
   cursor: pointer;
   display: none;
  }
  .scroll>div{
   width: 45px;
   height: 45px;
   transform: rotate(90deg);
   line-height: 45px;
   text-align: center;
   font-size: 35px;
   font-family: "黑体";
   background-color: rgba(0,0,0,.2);
   color: #fff;
  }
  .scroll>div:hover{
   background-color: rgba(0,0,0,.5);
  }
  .show{
   display: block;
  }
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

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

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

  • vue页面切换到滚动页面显示顶部的实例

    在用mint ui写移动端从'listview'跳转到详情页时,详情页面由于大于手机高度可以滚动,当点击'listview'滚动list进入详情页面时发现详情页面不是从顶部开始显示. 一.目标: 'listview'进入详情页面时详情页面从页面顶部开始显示. 二.让首先查了下两个页面的scrollY,每次都是不一样的,也没有发现listview与详情页面之间的scrollY之间的规律 三.解决思路:进入详情页面的时候固定滚动页面的位置在顶部 四.代码实现:vue里面写法如下,至于updated生

  • vue router 跳转后回到顶部的实例

    在main.js中加上这段代码 // 跳转后返回顶部 router.afterEach((to,from,next) => { window.scrollTo(0,0); }) 以上这篇vue router 跳转后回到顶部的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

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

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

  • Vue实现回到顶部和底部动画效果

    本文实例为大家分享了Vue实现回到顶部和底部动画效果的具体代码,供大家参考,具体内容如下 代码: <template> <div> <div class="scroll" :class="{show:isActive}"> <div id="toTop" @click="toTop(step)"><</div> <div id="toBottom

  • jQuery实现带有动画效果的回到顶部和底部代码

    本文实例讲述了jQuery实现带有动画效果的回到顶部和底部代码.分享给大家供大家参考,具体如下: 这款动画版的回到顶部和底部效果代码,也算是比较常见的一款网页特效了,像淘宝网就有这种效果,使用了jQuery插件,加入了动画效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-animate-style-scroll-top-buttom-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C

  • vue中实现弹出层动画效果的示例代码

    1 <template> <div class="home"> <!-- 首先将要过渡的元素用transition包裹,并设置过渡的name --> <transition name="mybox"> <div class="box" v-show="boxshow"></div> </transition> <button @click

  • Vue利用相反数实现飘窗动画效果

    目录 前言 实现思路与分析 1.画一个矩形元素作为飘窗,并使用固定定位 2.编写初始化函数,设定飘窗初始化规则 3.鼠标悬浮在飘窗时停止移动 4.鼠标离开飘窗时继续移动 5.关闭飘窗 6.监听窗口的大小 完整 demo 示例 前言 飘窗,即一个类似小窗子的在网页上移动的矩形元素,通常被用于一些通知类的应用场景, 飘窗与横幅相比,更显眼更具有强调感和动画感,在视觉上更有冲击性,在体验上互动性也更强. 先看下效果图 实现思路与分析 1.画一个矩形元素作为飘窗,并使用固定定位 css 绘制一个固定宽高

  • jquery 跳到顶部和底部动画2句代码简单实现

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Untitled

  • vue中使用animate.css实现炫酷动画效果

    目录 1.安装(在vscode终端中,使用npm安装) 2.引入 3.代码实现 animate.css 是一个来自国外的 CSS3 动画库,它提供了抖动(shake).闪烁(flash).弹跳(bounce).翻转(flip).旋转(rotateIn/rotateOut).淡入淡出(fadeIn/fadeOut)等多达 60 多种动画效果,几乎包含了所有常见的动画效果.这些效果在大多数支持CSS3的浏览器上都能保持一致.简单来说,我们使用它,只需要写很少的代码,就可以实现非常炫酷的动画效果. 官

  • JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件

    现在网上的回到顶部组件,懂不懂就一大段让人看不懂javascript代码,还各种不兼容.起始这个组件,完全可以自己利用javascript的滚动事件window.onscroll与position:fixed手写.IE6的兼容性问题主要出现在position:fixed上面,如何解决已经在<[CSS]IE6中的position:fixed问题与随滚动条滚动的效果>(点击打开链接)介绍过了. 下面具体说说如何利用JavaScript中的滚动事件window.onscroll实现这个回到顶部组件.

  • vue2.0 中使用transition实现动画效果使用心得

    实践 这里将通过四个实践小案例来体验和学习css过渡,css动画,javascript钩子,列表过渡的应用.至于案例用到的知识点就请自行学习官网文档. 1.css过渡–实践 先来看看demo效果: 这个案例其实很简单,通过一个transition来触发多个子元素的过渡效果,我们只需要定义元素对应的过渡效果就可以,其他事情vue会帮我们搞定,由此可以扩展出其他酷炫的过渡场景效果.先来看看这个简单案例的代码实现: <template> <div class="app"&g

  • vue.js实现回到顶部动画效果

    最近使用vue.js做了几个页面,其中有一个回到顶部的动画效果记录下. html如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>回到顶部</title> <META HTTP-EQUIV="pragma" CONTENT="no-cache"> <META HTTP-EQUIV=

  • vue通过v-show实现回到顶部top效果

       html <div class="totop" v-show="toTopShow" @click="toTop()">top</div> css .totop { width: 50px; height: 50px; line-height: 50px; border-radius: 25px; background-color: white; position: fixed; bottom: 75px; righ

随机推荐