简易的返回到顶部前端代码
HTML部分
<a class="to-top">↑</a>
CSS部分
.to-top { display: none; color: #fff; background-color: #282828; display: inline-block; height: 40px; width: 40px; line-height: 40px; text-align: center; border-radius: 2px; z-index: 101; opacity: 0.4; cursor: pointer; position: fixed; right: 38px; bottom: 38px; } .to-top:hover { color: #fff; opacity: 1; }
JS部分
//返回顶部 var sc = $(".to-top"); sc.bind("click", function() { $('html,body').animate({ 'scrollTop': 0 }, 400); }); $(window).scroll(function() { var scrtop = document.body.scrollTop; if(scrtop >= 100) { sc.show(); } else { sc.fadeOut(); } });
本文系作者 @鸣宇MeatY 站长 原创发布在 鸣宇的记事本。未经许可,禁止转载。