如何实现做一个简单的返回顶部效果按钮

如何实现做一个简单的返回顶部效果按钮

开发工具与关键技术：DW—jquery
作者：Mr_恺
撰写时间：2019.01.17

我们是不是在浏览网页的时候，可以看到网页右下都会有一个“返回顶部”的按钮，
点击它就回能回到顶部，那么怎样实现返回顶部的效果呢？

先HTML布局，用一个content的div存内容，a标签做返回顶部的图标

然后设置一下css样式，把返回图标定位

1. 这是直接粗鲁的方法就是在,a标签那个跳转路径为空或者放#号，其实就是刷新一下网页，网页一闪，滚动条一样回到了上面
   
   或
   
2. 这是带动画效果的滚动条：
   先把jquery插件，插件版本不做要求，我这引进jquery-3.2.1.js插件
   
   设置一个方法：
   scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）
   
   这个方法:当滚动条小于500px时，那个返回顶部图标是隐藏的，当滚动条大于500px时，那个返回顶部图标是显示的
   给a标签绑定点击事件，返回顶部是相对于整个HTML与body文档，所以要获得HTML和body元素，然后设置动画效果使用插件里的animate方法，第一个参数scrollTop设置为0，这样滚轮条就会回到顶部，第二个参数是表示回到顶部的所需的时间，具体时间自己设置