首 页
关于方维
网站案例
网站建设
小程序开发
解决方案
建站资讯
联系方维
400-800-9385
网站制作之Jquery返回顶部按钮
发表日期:2019-08-28 11:40:48 作者来源:严成 浏览:3153 标签:
网站制作
当前位置:
首页
-
建站资讯
-
网站建设
有些网站页面过长,在返回顶部的过程中,需要不要滑动鼠标滚轮来返回顶部,这样费时又费力,今天我们制作返回顶部按钮,只需要鼠标轻轻点击一下,就可以直达页面顶部。
网页的主体部分,分别用了宽度一致(1000px)、高度各不相同、背景颜色不同、居中的四个div盒子组成,使页面的高度足够高让页面出现滚动条;返回按钮使用了固定定位(position:fixed),宽高50px的正方形div,始终靠页面右边,为了使按钮醒目背景色偏蓝,颜色白色。
Html部分和css部分比较简单在这里我就不多说了,js部分如图:
因为返回按钮一开始设置是隐藏的,所以这里用的js来控制显示隐藏,当滚动条距离顶部超过100px时,让返回按钮有过度的显示,当小于100px时有过度的隐藏。
当点击返回按钮时触发事件函数,这里使用了jquery动画来用1s的时间使滚动条自动返回顶部。简单的返回顶部按钮完成。
如没特殊注明,文章均为方维网络原创,转载请注明来自https://www.szfangwei.cn/news/5246.html
上一篇:
无规则打破空间设计(一)
下一篇:
网站建设公司在没有合作之前为什么不出设计稿?
相关网站设计案例
长丰影像Saramonic
长丰影像BOYA
明鉴检测
相关资讯
Jquery-vue-react 点击关闭弹窗,刷新页面不...
日期:2023-11-13 浏览:1491
利用jquery-ui实现后台列表的拖拽排...
日期:2023-04-25 浏览:1319
如何使用 HTML5、CSS3 和 JQuery 创建手风...
日期:2022-08-20 浏览:2350
常见问题
企业网站建设常见问题整理合集【置顶】
在深圳建设一个公司网站多少钱
开发网站需要多久跟这九个因素有关
最新文章
都是定制网站,为何价格相差巨大
浏览量:3484
创意文案广告设计对于企业商品牌的重要性...
浏览量:3693
域名过户怎么操作?
浏览量:5537
服装公司网站建设 服装公司网站制作 如...
浏览量:5413
如何使用高德地图在网站页面上添...
浏览量:7261
网站制作之PHP发送系统邮件
浏览量:5320
400-800-9385
97798819
回到顶部
0
请您留言
非常抱歉,客服不在线,麻烦留下您的联系电话或者微信,我们看到后会马上联系您!
提交
感谢留言
我们会尽快与您联系
关闭