jQuery - scrollTop command not scrolling

Question

I'm displaying some images on a webpage and I want it to be scrolled all the way to the bottom as soon as the page loads, then fade the image in. This is what my code looks like thus far:

    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
        $(document).ready(function(){
            // fade in initial image
            $("#lower").fadeIn(3000);
            $("#lower").css("display", "block;");

            // show only initial image at mid-page
            var margin = ( $(window).height() - $("#lower").height() ) * (0.5);
            $("#lower").css("margin-top", margin);

            // set scroll position to bottom of page
            $(document).scrollTop( $(document).height() );

        });
    </script>

and my html looks like this:

<body>
    <div id="view">
        <img id="upper" src="pages/2.gif">
        <img id="lower" src="pages/1.gif">
    </div>
</body>

(#upper has opacity 0 and I plan to fade it in later, when the user scrolls up to the image)

the problem I'm having is that the page doesn't scroll all the way to the bottom on load. Ive tried a number of things including changing the selector for the .scrollTop function to body and/ or html tag as well as document or window. I even tried overshooting the scrollTop value excessively but to no avail.

Can anyone tell me me why The page is not scrolling all the way to the bottom upon load?

[EDIT] Sorry sorry, sloppy code. Finals week and little sleep. Heres a no-typo version of the same thing with the same problem. I even overshot the scrollTop parameter here, but the result is the same.

An observation: scroll location persists after refresh. Could this have anything to do with the obstinate scroll position here?

did you check your browser's console? maybe an exception is being shown/thrown? — blurfus
– blurfus, Commented Jun 10, 2014 at 19:29
Voting to close on the typo and down-voting the OP for not simply checking his console errors. — Sparky
– Sparky, Commented Jun 10, 2014 at 19:36
Just because document is ready it doesn't mean the image is, have the images loaded and filled out the document? If not the height is calculated before images and then the images will increase the document height. — GGJ
– GGJ, Commented Oct 26, 2015 at 20:37

Jai · Accepted Answer · 2014-06-10 19:27:57Z

2

You have a typo here:

var margin = ($(window).hieght() - $("#lower").height())/2;
//----------------------^^^^^^^---a spelling typo

which should be:

var margin = ($(window).height() - $("#lower").height())/2;

Because of this the script execution stops and it never goes to the line where you have done the scrollTop. so all in all it gets stopped at an error and does not go further for execution.

Also i want to add that this is not a correct way of doing:

$("#lower").attr("style", "display: block;")

instead you can use .css() method:

$("#lower").css("display", "block");

or with simple .show(), fadeIn(), .toggle('show') etc. too.

answered Jun 10, 2014 at 19:27

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery - scrollTop command not scrolling

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related