400-800-9385
网站建设资讯详细

网站制作之Jquery返回顶部按钮

发表日期:2019-08-28 11:40:48   作者来源:严成   浏览:2876   标签:网站制作    
有些网站页面过长,在返回顶部的过程中,需要不要滑动鼠标滚轮来返回顶部,这样费时又费力,今天我们制作返回顶部按钮,只需要鼠标轻轻点击一下,就可以直达页面顶部。
网页的主体部分,分别用了宽度一致(1000px)、高度各不相同、背景颜色不同、居中的四个div盒子组成,使页面的高度足够高让页面出现滚动条;返回按钮使用了固定定位(position:fixed),宽高50px的正方形div,始终靠页面右边,为了使按钮醒目背景色偏蓝,颜色白色。
Html部分和css部分比较简单在这里我就不多说了,js部分如图:

网站制作代码1

 


因为返回按钮一开始设置是隐藏的,所以这里用的js来控制显示隐藏,当滚动条距离顶部超过100px时,让返回按钮有过度的显示,当小于100px时有过度的隐藏。

网站制作代码2

当点击返回按钮时触发事件函数,这里使用了jquery动画来用1s的时间使滚动条自动返回顶部。简单的返回顶部按钮完成。
 
如没特殊注明,文章均为方维网络原创,转载请注明来自https://www.szfangwei.cn/news/5246.html