标签：span click class 项目 back pointer 移动 index one
今天做了个回到顶部的功能,在这里记录一下,有需要可以拿去试试!
CSS部分,很简单就一个class
/*回到顶部*/ .back-top { position: fixed; right: 15px; bottom: 15px; z-index: 9999; font-size: 25px; width: 40px; height: 40px; background-color: #adadad; color: #ffffff; cursor: pointer; border-radius: 2px; text-align: center; } .back-top:hover { background-color: #a3a3a3; }
html部分 也非常简单,一个div, 里面一个图标就可以了.图标我是用奥森图标,大家可以自行更换
<div class="back-top" style="display: none;" title="回到顶部"> <!--此处回到顶部图标自己改--> <i class="fa fa-angle-double-up"></i> </div>
jQuery 部分,也非常简单,相关注意点看注释
//回到顶部 $(function () { if ($(window).width() >= 700) {//本人的项目是响应式的,但是移动端不显示回到顶部,自己可以去掉 $(window).scroll(function () { if ($(window).scrollTop() <= 200) { if ($(".back-top").css("display") != "none") { $(".back-top").slideUp("normal"); //缓慢下降隐藏 } } else { if ($(".back-top").css("display") == "none") { $(".back-top").slideDown("normal"); //缓慢上升显示 } } }); } }); $(".back-top").click(function () { $("body").animate({ scrollTop: 0 }, "slow"); //回到顶部 });
标签：span click class 项目 back pointer 移动 index one
原文地址：http://www.cnblogs.com/fancyblogs/p/6273742.html
