1. 实现思路
首先在实现这个效果之前 先来描述一下这个效果
A) 返回顶部的按钮 一般会在屏幕的第二屏才会出现。 所以我们需要来判断是否到达第二屏。
B) 其次 鼠标移动上去会显示返回顶部的字样
C) 点击 返回按钮之后 会以慢慢返回上面 不会匀速
2. HTML 和 CSS
首先 div 表示中间页面部分 a就是一个返回顶部的按钮 固定定位在右下方。 第一屏的时候不会显示 在第二屏才会显示 使用hover 来 显示上面的说明字
按钮 默认 40 * 40 的 把鼠标移动上去之后 就会显示下面的 40部分。
3. js部分
首先我们获取到 滚动条到顶部的高度。那我们怎么控制它的高度 。我们可以直接给它赋值 就是一个数字 这样会滚动条识别到这个数字之后就会滚动到相应的位子。
怎么赋值？ 很简单
这样滚动条就会到 距离顶部200px 的位置 我们只要一直减小这个高度值 直到0 不就可以使滚动条返回顶部吗
所以 我们让他慢慢变小。 我们还需要一个 定时器 来 执行。 每隔多少时间 来减少到顶部的距离
当 距离为0 的时候 就清除定时器。 这里就完成了返回顶部的大部分代码。接下来 实现 滚动到第二屏显示返回顶部的 按钮
5. 滚动到第二屏时 显示返回顶部按钮
window.onscroll = function(){};
我们需要获取距离顶部的距离 还有当前可视区域的高度。做一下判断就可以。
