当前位置: 首页 > Web前端 > HTML5

vue实现滚动超出首屏高度点击小框回到顶部的效果(Firefox和IE都有效)

时间:2023-04-05 00:10:34 HTML5

p{margin-bottom:30px;}.back{width:60px;高度:60px;行高:60px;文本对齐:居中;背景色:#abf;位置:固定;右:100px;底部:100px;cursor:pointer;}思路分析回到顶部效果,其实思路很简单。即开头有一个框,固定在浏览器网页的右下角,最开始应该是隐藏的。使其在滚动超过折叠高度以上的位置时出现。给这个小盒子绑定一个点击事件。在点击事件的回调中,使用一个定时器来降低滚动条的高度,从而达到回到顶部的效果。当然滚动事件也必须绑定监听滚动的高度,即监听滚动条纵坐标的位置。因为需要比较滚动条的滚动高度和首屏的高度。废话不多说,先来看看最终效果图:请按照注释附上代码p{margin-bottom:30px;}.back{width:60px;高度:60px;行高:60px;文本对齐:居中;背景色:#abf;位置:固定;右:100px;底部:100px;cursor:pointer;}总结一下,好记性不如烂笔,记录一下