网站建设之Jquery返回顶部按钮

有的网站页面过长，在返回顶部的过程中，需需不需要滑动鼠标滚轮来返回顶部，如此浪费时间又费力，今天大家制作返回顶部按钮，仅需鼠标轻轻点击一下，就能直达页面顶部。网页的主体部分，分别用了宽度一致（1000px）、高度各不相同、背景颜色不同、居中的四个div盒子组成，使页面的高度足够高让页面出现滚动条；返回按钮用了固定定位（position:fixed），宽高50px的正方形div，一直靠页面右侧，为了使按钮显眼背景色偏蓝，颜色白色。Html部分和css部分比较简单在这里我就不多说了，js部分如图：

由于返回按钮刚开始设置是隐藏的，所以这里用的js来控制显示隐藏，当滚动条距离顶部超越100px时，让返回按钮有过度的显示，当小于100px时有过度的隐藏。当点击返回按钮时触发事件函数，这里用了jquery动画来用1s的时间使滚动条自动返回顶部。简单的返回顶部按钮完成。