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 许可协议。转载请注明出处！