怎么使用原生代码写一个返回顶部的 效果

1. 实现思路

　　首先在实现这个效果之前 先来描述一下这个效果

　　A) 返回顶部的按钮 一般会在屏幕的第二屏才会出现。 所以我们需要来判断是否到达第二屏。

　　B) 其次 鼠标移动上去会显示返回顶部的字样

　　C) 点击 返回按钮之后 会以慢慢返回上面 不会匀速　

2. HTML 和 CSS

　　

　　首先 div 表示中间页面部分 a就是一个返回顶部的按钮 固定定位在右下方。 第一屏的时候不会显示  在第二屏才会显示 使用hover 来 显示上面的说明字

　　  

　　按钮 默认 40 * 40 的 把鼠标移动上去之后 就会显示下面的 40部分。

3. js部分 

　　首先我们获取到 滚动条到顶部的高度。那我们怎么控制它的高度 。我们可以直接给它赋值 就是一个数字 这样会滚动条识别到这个数字之后就会滚动到相应的位子。 

　　

　　怎么赋值？ 很简单

　　 

　　这样滚动条就会到 距离顶部200px 的位置 我们只要一直减小这个高度值 直到0 不就可以使滚动条返回顶部吗

　　所以 我们让他慢慢变小。 我们还需要一个 定时器 来 执行。 每隔多少时间 来减少到顶部的距离

　　

　　当 距离为0 的时候 就清除定时器。 这里就完成了返回顶部的大部分代码。接下来 实现 滚动到第二屏显示返回顶部的 按钮

5. 滚动到第二屏时 显示返回顶部按钮

　　window.onscroll = function(){};

　　我们需要获取距离顶部的距离 还有当前可视区域的高度。做一下判断就可以。

　　

　

转载于:https://www.cnblogs.com/syomm/p/5734774.html