vue实战开发012:点击“回顶部”按钮滚动回顶部

昨天发现index写漏了一个功能，为了给用户更好的体验一般网站右边都会提供一个返回顶部的按钮，正常页面载入时不显示该按钮，当我们往下移动网页时这个按钮就显示出来了，点击这个按钮我们就可以快速的滚回到顶部位置（这里是滚动回去，2345中的是直接跳回顶部的，不怎么友好，而且返回按钮一加载网页就有了，都没动何来的返回，这里明显不合逻辑），我适当的改动了下，下面是功能演示。

?

首先我们还是来写HTML代码，还是模仿2345来做的，提供了2个按钮：留言板和回顶部，这里我用的很简单，直接用一个div包裹了2个a标签，分别在a标签中嵌套了一个图标和文字内容（用到了i标签和em标签）。

<div class="Floating">
 <a href="javascript:;"><i class="fa fa-pencil-square"></i><em>留言板</em></a>
 <a href="javascript:;"><i class="fa fa-chevron-up"></i><em>回顶部</em></a>
</div>

接下来我们给DOM元素来写样式，写样式需要给点耐心，边看边调整，这样才能获取你想要的效果了，这里我用到的是position的fixed属性：生成绝对定位的元素，相对于浏览器窗口进行定位（固定定位），然后给定一个z-index属性让他永远放在其他元素上方。颜色切换我放在了a标签，直接用：hover就可以实现，图标和内容别忘了使用display: block;将其设置成块级元素。

.Floating{
 width:65px;
 position: fixed;
 z-index:600;
 right:20px;
 bottom: 280px; 
}
.Floating a{
 text-decoration: none;
 margin-bottom: 5px;
 display: block;
 opacity: 0.9;
 background-color: rgb(130,130,130);
}
.Floating a:hover{
 background-color:#33AAFF;
}
.Floating a i{
 font-size: 24px;
}
.Floating a i,.Floating a em{
 padding:4px;
 width:56px;
 height:24px;
 text-align: center;
 color:rgb(253, 252, 252);
 z-index:5;
 cursor: pointer;
 font-style: normal;
 display: block;
}

这样我们就得到如下图所示的内容样式了，当鼠标放上去的时候背景就变成了蓝色选中状态，移出时恢复背景色即可。前面说了当页面载入时“回顶部”按钮是隐藏的，当移动后方才显示的，所里这里我们可以v-show或者v-if来控制按钮的隐藏功能，这里我们定义了一个v-show="backFlag"，默认backFlag :false。

?

接下来我们就要开始给按钮添加事件了，我给“回顶部”添加一个@click="backTop"事件，我们在methods中实现backTop这个方法，既然是通过滚动来触发事件的，所以我们在页面载入时就应该对页面进行滚动监听，并指定事件触发时要执行的函数showBtn，这样当我们滚动页面的时候就对应的触发了showBtn方法，当满足条件时显示“回顶部”按钮。

 // window对象表示浏览器窗口，监听滚动事件（所有浏览器都支持window对象）
 mounted () {
 window.addEventListener('scroll', this.showBtn) //scroll 滚动事件
 },
methods:{
 showBtn () { // 计算距离顶部的高度，当高度大于40显示回顶部，小于40则隐藏（默认隐藏）
 /*获取当前页面滚动条纵坐标的位置
 IE9及以上：可以使用window.pageYOffset或者document.documentElement.scrollTop ，
 safari： window.pageYOffset 与document.body.scrollTop都可以
 Chrome：谷歌浏览器只认识document.body.scrollTop;*/
 let that = this
 let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
 that.scrollTop = scrollTop
 if (that.scrollTop > 40) {
 let that = this
 that.backFlag = true
 } else {
 that.backFlag = false
 }
}

这个应该很好理解吧，我把注释都写在代码中了，主要思路就是获取当前滚动条纵坐标的位置，当这个值大于40时就将backFlag改成true让“回顶部”按钮显示出来即可，当当前滚动条纵坐标的位置小于40时再次隐藏“回顶部”按钮。

?

接着给“回顶部”按钮添加点击事件，在methods:{}中实现backTop(）方法，这里为了有个移动的过程，我给事件添加了定时器，将当前滚动条的垂直位置减去每次移动的距离赋给当前滚动条纵坐标的位置，这样就可以实现自动滚动的效果了，当移动到顶部时别忘了清除定时器（不然牛后面就没法玩了，只要一移动就会自动滚回顶部了）。

 backTop(){ // 点击返回顶部方法，计时器是为了过渡顺滑
 let that = this
 let timer = setInterval(() => {
 let speed = Math.floor(-that.scrollTop /10) 
 //scrollTop获取元素的滚动条的垂直位置，Math.floor() 向下取整
 document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + speed
 //document.documentElement.scrollTop 获取当前页面的滚动条纵坐标位置
 if (that.scrollTop === 0) {
 clearInterval(timer)
 }
 }, 20)
 },

最后别忘了销毁监听事件，使用destroyed ()方法调用销毁监听事件，这样当我们离开这个页面的时候，便会调用这个函数移除监听，释放内存，到这里我们的功能就全部实现了，是不是效果不错，有兴趣的可以试试。

destroyed () { // 销毁监听事件,当我们离开这个页面的时候，便会调用这个函数
 window.removeEventListener('scroll', this.showBtn)
 },