jq实现点击返回网站顶部

作者:Jasmine - 2016年04月29日

返回顶部代码如下:

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


 请勿发布不友善或者负能量的内容。审查将对发布广告等违规信息进行处罚!