22
2018
05

【教程】网页到达底部显示返回顶部二:jQuery方法

测试浏览器:chrome,jquery版本:jquery-3.3.1.min.js

ie8请使用jQuery1.9.1版本

js代码

$(window).scroll(function () {
      //已经滚动到上面的页面高度
     var scrollTop = $(this).scrollTop();
      //页面高度
     var scrollHeight = $(document).height();
       //浏览器窗口高度
     var windowHeight = $(this).height();
      //此处是滚动条到底部时候触发的事件,在这里写要加载的数据,或者是拉动滚动条的操作
      if (scrollTop + windowHeight == scrollHeight) {
        //alert('页面到底部了');
	$('#b2').css('display','block');
       }
      else {
	$('#b2').css('display','none');
       }
 });

html代码

top<a id="b1">
<div style="height:1400px;"></div>
bottom
<div id="b3" style="position:fixed;top:780px;left:1700px;">联系我们</div>
<div id="b2" style="display:none;position:fixed;top:800px;left:1700px;"><a href="#b1">返回顶部</a></div>



打赏
« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。