博客园美化之路-添加返回顶部图标
添加返回顶部图标:
效果:
步骤:
- 选择图标,我个人是从网上找的,推荐网站:http://www.lanrentuku.com/gif/a/top.html
- 将图标添加到博客相册中
- 获取存储到博客图标的地址,先点击图标,在博客中打开,然后如图所示复制地址
4.将代码添加到页首HXML代码中
<!-- 返回顶部 --> <style> #back-top { position: fixed; bottom: 10px; right: 8px; z-index: 99; } #back-top span { width: 70px; height: 140px; display: block; background:url(你的图标的url) no-repeat center center; } #back-top a{outline:none} </style> <script type="text/javascript"> $(function() { // hide #back-top first $("#back-top").hide(); // fade in #back-top $(window).scroll(function() { if ($(this).scrollTop() > 400) { $('#back-top').fadeIn(); } else { $('#back-top').fadeOut(); } }); // scroll body to 0px on click $('#back-top a').click(function() { $('body,html').animate({ scrollTop: 0 }, 500); return false; }); }); </script> <p id="back-top" style="display:none"><a href="#top"><span></span></a></p>
5.根据效果调整相关参数,直到满意为止
作者:方知有
Motto: 热爱可抵岁月漫长
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须在文章页面给出原文连接,否则保留追究法律责任的权利。
所有评论和私信都会在第一时间处理,如有问题或建议,请多多赐教!
支持博主:如果您觉得文章对您有帮助,可以点击文章右下角【推荐】一下。您的鼓励是作者坚持原创和持续写作的最大动力!