十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
当用户在查看你的一篇比较长的文章之后,如果你没有返回顶部按钮,这对需要返回顶部是非常麻烦的,因此前几天给自己的博客添加了百度分享按钮的时候顺便把返回顶部功能也做好了。在实现这一功能之前,我在网上查了一下,有很多介绍说是插件,这是我个人是比较反感的,因为插件用多了不仅会影响网站加载速度,而且网站程序升级之后还有可能出现兼容性问题,所以我没有选择插件,而是用JS+CSS的方法实现的。
在前面的一篇文章:“如何为自己的网站添加百度分享按钮”中已经讲到过如何添加分享按钮,今天就来说一下用JS+CSS如何实现网站返回顶部功能。
第一步,需要准备一张图片,准确的说是显示返回顶部的图标,这种图标网上非常多,可以自己百度一下,当然如果你PS技术够好的话,你也可以自己制作一个。
第二步,编写代码,包括CSS+DIV代码和Javascript代码。我的代码如下:
CSS+DIV代码