jq实现点击返回网站顶部
返回顶部代码如下:
html:
<div class="backtop"><a href="javascript:void(0);"><img src="http://www.muquan.net/wp-content/themes/muquannet/images/backtop.png" alt="返回顶部"></a></div>
js:
//返回顶部 $(".backtop").hide(); $(function(){ $(window).scroll(function(){ if ($(window).scrollTop()>300){ $(".backtop").fadeIn(); }else{ $(".backtop").fadeOut(); } }); $(".backtop a").click(function(){ $('body,html').animate({scrollTop:0},500); return false; }); });
css:
/*backtop*/ .backtop{position: fixed;bottom: 100px;right: 20px; } .backtop a{display: block;width: 40px;height: 40px;overflow: hidden;color: #fff;text-align: center;filter: Alpha(Opacity=60);opacity: 0.6;-moz-transition: opacity 0.5s ease;-webkit-transition: opacity 0.5s ease;-o-transition: opacity 0.5s ease;transition: opacity 0.5s ease;} .backtop a:hover{filter: Alpha(Opacity=100);opacity: 1;}
简单的代码实现回到顶部效果,提供大家学习。
本文作者: Jasmine
本文链接: https://www.jianbaizhan.com/article/398
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!