jquery .scrollTop()屏幕高度

时间:2014-04-03 11:22:15

标签: javascript jquery

我一直在编写一个小脚本,用于缩短在我的JSON Feed上输出的文档。

我意识到,对于较长的消息,最小化它可能会跳过一些而你必须向后滚动才能找到你所在的位置,因此添加了一个滚动功能,可以在缩小时将你带回到消息的顶部。当它每次都被解雇时,结果非常烦人 - 所以我想,为什么不在元素的顶部位于屏幕上方时才开火呢?

这就是我被困的地方 - > $(window).scrollTop();根本不想为我输出屏幕高度,这是令人愤怒的。我试过不同的浏览器,唯一一个.scrollTop()正常工作的是Internet Explorer。

以下是以下功能:

function jexpand(id){
    var elm=$('#d'+jdesc[id].i); // element

    var ofs=elm.offset().top; // element height - works fine
    var top=$(window).scrollTop(); // Y U NO WORK?!!!

    if(jdesc[id].e==true){ // boolean to check whether to expand or contract
        jdesc[id].e=false; // change boolean flag
        if(ofs < top) $('html').animate({scrollTop:($('#'+jdesc[id].i).offset().top)-(20)+'px'},'slow'); // animate to top minus 20 pixels
        elm.html(jdesc[id].d.substring(0,347)+'...<br><div class="readmore"><span id="'+id+'">Show More</span></div>');
    }else{
        jdesc[id].e=true;
        elm.html(jdesc[id].d+'<br><div class="readmore"><span id="'+id+'">Show Less</span></div>');
    }
    $('.readmore span').click(function(){jexpand(this.id)}); // reset click trigger

    //alert(top+' <-> '+ofs);
}

当我在IE以外的浏览器中取消注释底部的alert()时(我试过chrome,mozilla,chrome android,船浏览器android)我得到的消息类似于:

[object Window] <-> 1077.5625

[对象窗口]显然不是一个可以大于或小于元素高度的数字!那么这意味着什么呢,我还需要问一个标志吗?起初我认为它可能是我推荐的错误元素,所以尝试top=$('body').scrollTop();html等,我甚至尝试使用div包装元素,但无济于事。

我使用的是jquery 1.11.0和1.9.1我遇到了同样的问题。

我是否试图以错误的方式返回屏幕顶部或让我的所有浏览器都循环播放?

编辑:

奇怪的是我发现了一个可以解释一些问题的问题,当我输入$(document).scrollTop()到控制台时它给了我正确的屏幕高度但是如果我在var top;外面我得到此错误的函数'window.webkitStorageInfo' is deprecated. Please use 'navigator.webkitTemporaryStorage' or 'navigator.webkitPersistentStorage' instead.

我正在使用从html5up借来的webkit,这在某种程度上干扰了代码。现在来了解它是什么......

很抱歉这个混乱,如果没有这个剧本,一切工作都很好......

4 个答案:

答案 0 :(得分:2)

试试这种方式

JS CODE:

 $(window).scrollTop(0);  // this will scroll to top of the page

现场演示:

http://jsfiddle.net/dreamweiver/fZrz7/6/

快乐编码:)

答案 1 :(得分:1)

$(document).scrollTop()怎么样?它总是对我有用。

答案 2 :(得分:0)

试试像这样的人......

if($(window).scrollTop()>500){
     elm.html(jdesc[id].d.substring(0,347)+'...<br><div class="readmore"><span id="'+id+'">Show More</span></div>');}
else{
     elm.html(jdesc[id].d+'<br><div class="readmore"><span id="'+id+'">Show Less</span></div>');
}

如果工作接下来尝试

var ofs=elm.offset().top;

答案 3 :(得分:0)

试试这个:

$(document).height(); //returns window height

$(document).scrollTop(); //returns scroll position from top of document

$(selector)[0].scrollHeight;

$(document).prop('scrollHeight');