网站建设 回到顶部按钮,全代码打造简洁美观。
这次,潜行者 m 给大家带来一个比较实用的 jquery 技巧,为你的网站添加一个纯代码画出来的、简洁美观的回到顶部按钮。这个按钮的效果就是,当页面滑动一段距离之后,就会浮现出来这个按钮,点击这个按钮之后,就自动滚动到顶部。 点击之后就会跳转到顶部,然后这个按钮平滑消失。与网上的相比,潜行者 m 版的是纯代码,加载速度更快,效果色彩控制好;代码精简,只有数条而已,拒绝大坨大坨的代码。废话不多说,下面就开始制作。 html 结构 我使用了 a 标签作为这个结构,可能不太标准,但是比较方便。在 a 标签中,内置了一个 span 标签,用来显示三角号。具体代码如下: 对,你没看错,就这么简单的一句代码,直接在 a 标签中,填写一个三角号。剩下的就是使用 css 进行样式控制。 css 代码 #gotop{ display:block; width:60px; height:60px; position:fixed; bottom:50px; right:40px; border-radius:10px 10px 10px 10px; text-decoration:none; display:none; background-color:#999999; } 上面这段代码,定义了 a 标签的外观样式,定义 display 为 block,这样,我们才能指定它的 width 和 height。定义 position 为…