实现的效果也就是,当有滚动条是,滚动条未动或与顶部距离小于多少像素是,返回顶部按钮处于隐身状态,当滚动条与顶部距离大于一定像素时,返回顶部按钮出现,实现点击‘返回按钮’后,从当前位置回到等不位置。要先引用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; }); });
时间: 2024-10-10 08:00:24