jQuery .scrollTop（）屏幕高度

Question

I have been writing a small script that shortens documents that are being output on a JSON feed of mine.

I realised that with longer messages, on minimising it could skip a few and you'd have to scroll back to find where you were and so added a scroll function to take you back to the top of the message on minifying. This turned out to be quite annoying when it fired every single time - so I thought, why not make it fire only when the top of the element is above the screen?

And this is where I am stuck --> $(window).scrollTop(); simply doesn't want to output the screen height for me, it's infuriating. I tried with different browsers and the only one .scrollTop() worked for correctly was Internet Explorer.

Here is the function below:

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);
}

When I uncomment the alert() at the bottom in a browser other than IE (I tried chrome, mozilla, chrome android, boat browser android) I get a message akin to:

[object Window] <-> 1077.5625

[object Window] is obviously not a number that can be greater or less than the element height! So what does this mean, is there another flag I need to ask of it? At first I assumed it might be the wrong element I was refering so tried top=$('body').scrollTop(); , html , etc, I even tried using div wrapper elements but to no avail.

I am using jquery 1.11.0 and with 1.9.1 I had the same issue.

Am I trying to return the screen top in the wrong way or have all my browsers gone loopy?

EDIT:

Weirdly I've found an issue which may explain things a little, when I typed $(document).scrollTop() into a console it gave me the correct screen height however if I make a var top; outside of the function I get this error 'window.webkitStorageInfo' is deprecated. Please use 'navigator.webkitTemporaryStorage' or 'navigator.webkitPersistentStorage' instead. 'window.webkitStorageInfo' is deprecated. Please use 'navigator.webkitTemporaryStorage' or 'navigator.webkitPersistentStorage' instead. .

I am using a webkit borrowed from html5up and this is somehow interfering with the code. Now to find out what it is....

Sorry for the confusion, without this script everything works fine grr...

Answer 1

Try this way

JS CODE:

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

LIVE DEMO:

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

Happy Coding :)

Answer 2

What about $(document).scrollTop() ? It always worked for me.

Answer 3

Try smth like this..

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>');
}

If work try next with

var ofs=elm.offset().top;

Answer 4

Try this:

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

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

$(selector)[0].scrollHeight;

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