为什么获取不到body的滚动条高度

k1ans 2017-10-05

收起

8回答

卡布琦诺 2018-03-18 14:22:12

$(window).height()获取的是当前可视窗口的高度，也就是用户能看到的窗口的高度，是不变的（在窗口大小不变的前提下）；$(document).height() 获取的是窗口内文档的高度,这个高度随着文档内容的高度改变而改变；当窗口滚动条滚到最低端时，$(document).height() == $(window).height() + $(window).scrollTop()。
当窗口内文档高度不足浏览器窗口高度时，$(document).height()返回的是$(window).height()。

希望可以帮到你~

收起回答

慕无忌9800862 2017-12-26 19:36:36

//img1.sycdn.imooc.com//climg/5a42343c000112ac09890410.jpg

应该是我们编辑文档之前的声明跟讲课老师不一样，

所以为了不影响之前编辑的效果，最好把

var top= $('body').scrollTop();

改为

var top= $(document).scrollTop();

收起回答

Timm_Lee 2017-10-13 14:03:33

把 $('body') 换成 $(document) 试试看。

即，把

var top= $('body').scrollTop();

换成

var top= $(document).scrollTop();

试试看。

收起回答

小丸子爱吃菜 2017-10-09 10:11:57

scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。你的页面如果没有滚动，没有滑动的话，值就是0。

另外，只有一部分代码，我们无法去定位到你代码的问题，我们测试的代码没有问题，你给的一小部分代码有问题，所以那就是上面的代码所引起的，你自己可以写个demo试试，如果demo没有问题，那就是别的地方出的问题。

收起回答

提问者 k1ans 2017-10-06 12:20:59

就是这里出问题要怎么解决

收起回答

小丸子爱吃菜 2017-10-06 11:03:38

<html>
<head>
<style type="text/css">
  div{height:1000px;}
</style>

</head>
<body>
<div></div>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>

</body>
</html>

<script type="text/javascript">

 $(function(){
 var top=$("body").scrollTop();
    console.log(top);

  
 });
   

</script>

上面的测试代码是没有问题的，你的代码获取不到，要结合代码的上下文，你上面发的代码看不出问题所在。

还是建议对比老师课程中的代码，尝试找出问题！

收起回答

提问者 k1ans #1

老师能抽空帮我看一下嘛

2017-10-07 10:21:28

提问者 k1ans 2017-10-06 10:17:02

$.fn.UiBackTop=function(){
    var ui=$(this);
    var el=$('<a href="#0">up</a>');
    ui.append( el);
    var windowHeight=$(window).height();
    $(window).on('scroll',function(){
        var top= $('body').scrollTop();
        console.log(top);
        if(top > windowHeight){
            el.show();
        }else{
            el.hide();
        };
    });
};

收起回答

小丸子爱吃菜 2017-10-05 21:27:04

你的截图看不清楚。

获取浏览器当前窗口文档body的高度：
$(document.body).height();
浏览器当前窗口文档body的宽度：
$(document.body).width();

如果还是有问题，最好将代码粘贴上来，如果是老师课程中讲的案例的话，建议将源码下载下来，好好对比参考下！

祝学习愉快！

收起回答

提问者 k1ans #1

$.fn.UiBackTop=function(){ var ui=$(this); var el=$('<a href="#0">up</a>'); ui.append( el); var windowHeight=$(window).height(); $(window).on('scroll',function(){ var top= $('body').scrollTop(); console.log(top); if(top > windowHeight){ el.show(); }else{ el.hide(); }; }); 获取不到body的滚动条高度 };

2017-10-06 10:16:32
慕九州_HeMoon #2

老师，我这边也遇到了这样的问题，根据同学的回答，将body改成了document。效果可以实现。但当我改成window的时候，效果也是可以实现。现在对document和window搞不清了。是否一般情况下可以替换使用？请问如何正确使用呢？ $.fn.UiBackTop=function(){ var ui=$(this); var el=$('<a class="ui-backTop" href="#"></a>') ui.append(el); var windowHeight=$(window).height(); $(window).on('scroll',function(){ var top=$(document).scrollTop(); // var top=$(window).scrollTop(); // var top=$('body').scrollTop();效果不能实现 if(top>windowHeight){ el.show(); }else{ el.hide(); } }) el.on('click',function(){ // $(document).scrollTop(0); $(window).scrollTop(0); }) }

2018-03-18 10:01:24