jquery右下角返回顶部

时间:2022-05-31 04:14:12

实现的效果也就是,当有滚动条是,滚动条未动或与顶部距离小于多少像素是,返回顶部按钮处于隐身状态,当滚动条与顶部距离大于一定像素时,返回顶部按钮出现,实现点击‘返回按钮’后,从当前位置回到等不位置。要先引用jquery.min.js

<script src="__PUBLIC__/js/jquery-2.1.4.min.js"></script>

html:

<div id="back-to-top" style="display:none">返<br />回<br />顶<br />部</div>

css:

  #back-to-top{
width: 25px;position:fixed;bottom:20px;right:20px;border:solid 1px #ccc;cursor:pointer;text-align: center;color: red;
_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
}

js:

jQuery(function ($) {
//当滚动条的位置处于距顶部20像素以下时,跳转链接出现,否则消失
$(window).scroll(function(){
if (jQuery(window).scrollTop()>20){
jQuery("#back-to-top").fadeIn(1000);
}
else
{
jQuery("#back-to-top").fadeOut(1000);
}
}); //当点击跳转链接后,回到页面顶部位置 jQuery("#back-to-top").click(function(){
jQuery('body,html').animate({scrollTop:0},1000);
return false;
});
});