html页面点击返回页面顶部

css:

.bottom_tools{ display:block; position:fixed; bottom:30px; right:20px;z-index: 999;}
.bottom_tools.backTop{ width:70px; height:70px; display:block; background: url(../images/backTop.png) 0 0 no-repeat;}
.bottom_tools.vkf{width:70px; height:70px; display:block; background: url(../images/vkf.png) 0 0 no-repeat;}

html:

<div class="bottom_tools">
    <a href="#" title="客服" class="vkf"></a>');
    <a href="#" style="display:none" id="backTop" title="返回顶部" class="backTop"></a>
</div>

js:

if(window.$) {
	$(window).scroll( function(){
	    if($(document).scrollTop() >= 500){
	    	$("#backTop").fadeIn();
	    }else{
	    	$("#backTop").fadeOut();
	    }
	});
}	


附,或者想要返回顶部时有向上滑动的动画效果 html 中可以这么写:

<a id="backTop" href="javascript:;" title="返回顶部" style="display: none;"></a>

然后添加js,这样返回顶部会有向上滑动的动画效果:

$('#backTop').click(function (e) {
    e.preventDefault();
    $('html,body').animate({scrollTop:0});
});


效果图如下:

500单位是px。

html页面点击返回页面顶部

你可能感兴趣的:(html页面点击返回页面顶部)