为了更好的提高页面的用户体验和需要的全站功能,老左博客在侧边增加了返回顶部的jQuery效果,同时加上订阅、QQ群以及联系到我个人的功能,方便能够及时的找到我和提供需要的便捷服务(如果之前没有可能需要从其他页面找我)。在一定程度上有这样的效果还是可以提高用户体验的(肯定与早期的漂浮对联广告不同)。
有几个朋友看到老左增加这些效果之后希望把代码放出来也需要使用,毕竟我也是找的网上的信息,然后进行适合自己的调整,同时还有其他几款不错的效果,于是就用此篇幅整理10款用户体验较好的返回顶部的jQuery演示及源码,如果有需要的朋友可以下载且整合到自己的网站中使用。
第一、返回顶部+微博按钮
老左的侧边返回顶部就是修改与这款效果,如果有需要和老左一样效果的可以下载这个然后使用。[演示]
第二、仿腾讯返回顶部和建议
图标比较大,也可以换成其他需要的图标和链接功能。[演示]
第三、火箭式返回顶部
这款返回顶部比较绚丽,仅有返回上部的效果,页面不止一屏之后点击火箭图标直接返回顶部,火箭图标消失。[演示]
第四、多图右下角
带有购物车、客服以及反馈信息的链接图标,我们如果有需要这样的效果也可以更换其他图标。[演示]
第五、在线客服式返回顶部
比较注重侧边在线客服效果的网站可以使用这款效果,比如企业网站等。[演示]
第六、带有微信二维码、上下滚动
带有反馈功能图标、二维码微信、以及上、下滚动功能结合。[演示]
第七、Metro扁平风格
这款METRO风格比较适合医疗机构的网站使用。[演示]
网上关于这样的返回顶部效果不止这几个,不过都差不多,我们可以根据上面的图标进行更换图标来变化自己需要的效果。以上7款肯定有一款适合你的。
如果有需要上述7个效果的源码可以打包在这里下载。