网站如何制作“返回顶部”按钮,节省用户拖动时间
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代码,以控制何时显示“返回页首”按钮以及何时隐藏该按钮。
通过放置以上三段代码,您可以在构建自己的网站时创建“返回页首”按钮。如果您认为按钮图标的外观不好,则可以下载“向上”图标来替换它。或学习我们的零基础网站建设培训课程,以创建更多网站功能。