jquery .scrollTop() 屏幕高度

Question

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

我意识到，对于较长的消息，在最小化时可能会跳过一些，您必须向后滚动才能找到您所在的位置，因此添加了一个滚动功能，以便在缩小时将您带回到消息的顶部。当它每次触发时，这结果很烦人 - 所以我想，为什么不让它只在元素顶部位于屏幕上方时触发呢？

这就是我被卡住的地方 --> $(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 以外的浏览器（我尝试过 chrome、mozilla、chrome android、boat browser android）中取消注释底部的 alert() 时，我收到类似于以下内容的消息：

[object Window] <-> 1077.5625

[object Window] 显然不是一个可以大于或小于元素高度的数字！那么这是什么意思，我还需要问另一个标志吗？起初我认为它可能是我引用的错误元素，所以尝试了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，这会以某种方式干扰代码。现在来看看它是什么......

抱歉给您带来了困惑，没有这个脚本一切正常...

Answer 1

试试这个方法

JS 代码：

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

现场演示：

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

快乐编码:)

Answer 2

试试这个：

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

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

$(selector)[0].scrollHeight;

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

Answer 3

像这样试试……

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;

Answer 4

$(document).scrollTop() 呢？它总是对我有用。