收藏此站 联系我们 宿迁腾云网络公司
全部 网站建设 SEO优化 技术日志
当前位置:网站首页 > 网站建设

网站如何制作“返回顶部”按钮,节省用户拖动时间

作者: 腾云网络 . 阅读量: . 发表时间:2021-01-31

如何在网站上创建“返回页首”按钮(带有代码)

当网站布局过长时,使用“返回页首”按钮,用户直接将其单击到网站顶部网页返回顶部图标的制作,可以节省网站用户的拖动时间。

今天,我搜索了一位来宾,教您如何制作“返回页首”按钮,该按钮可以自动确定用户网页的位置。如果位于顶部,则不显示“返回顶部”按钮,如果不位于顶部,则显示“返回顶部”按钮。如下图所示:

方法/步骤

在HTML页面的底部添加以下代码,以显示“返回顶部”按钮。 [如果您不懂HTML,可以学习html教程]

Δ

将以下CSS代码添加到CSS样式中,以控制“返回页首”按钮的样式。 [如果您不了解CSS网页返回顶部图标的制作,则可以学习CSS视频教程]

#goTopBtn {位置:固定;行高:46px;文本对齐:居中;宽度:46px;底部:35px;高度:46px;光标:指针;背景:#fff;显示:无;边界半径:6px;框阴影:0 0 8px rgba(0,0,0,0.13); font-size:22px; color:#999;}

在页面底部放置以下jquery代码,以控制何时显示“返回页首”按钮以及何时隐藏该按钮。

通过放置以上三段代码,您可以在构建自己的网站时创建“返回页首”按钮。如果您认为按钮图标的外观不好,则可以下载“向上”图标来替换它。或学习我们的零基础网站建设培训课程,以创建更多网站功能。


标签:按钮
转载请注明来源:https://www.tyweb.net/wzjs/386.html
现在咨询免费送诊断方案,每天限3名
马上填写资料获取方案
腾云网络产品
网站建设 微信小程序 微商城 APP开发 SEO优化
腾云网络服务
7x24小时售后支持 市内上门服务 免费后台培训 定期回访
关于腾云网络
关于我们
网站建设案例 小程序案例 APP开发案例
联系腾云网络
联系腾云网络
紧急问题处理电话
131-6035-5545 131-6035-5545
131-6035-5545
扫一扫关注腾云网络公众号