jQuery scrollTop only works once

Question

I am using this bit of code to open a div and scroll down to it. It works well, but only the first time I use it, even on page refresh it will not work again. Does anyone know why this is happening? Thanks in advance!

Here is the URL(www.patrickorr.ca)

$(document).ready(function() {
$("div.ftropen")
    .click(function(){
        $("div#connect").animate({height: "500px" }, "fast");                                              
        $("div#ftrconnect").fadeOut("fast");  //hide connectbtn
        $("div#ftrhide").fadeIn("fast");  //show hidebtn
        $("#connect").scrollTop($("#connect").scrollTop() + 500);
    return false;
});
$("div.ftrclose")
    .click(function(){
        $("div#connect").animate({height: "0px" }, "fast");                                            
        $("div#ftrhide").fadeOut("fast");  //hide hidebtn
        $("div#ftrconnect").fadeIn("fast");  //show connectbtn
    return false;
});
});

score 1 · Answer 1 · answered Jan 03 '13 at 14:57

Instead of

    $("body").animate({

Use the following

    $("html:not(:animated),body:not(:animated)").animate({

BODY and HTML are treated differently by Mozilla and Webkit browsers. So covering off both will help. Also introduce the :not(:animated) declaraction. JS for the animation to scroll to position would end up being something like...

    $('#DIV a[href^=#]').click(function(e) {
       e.preventDefault();
       var h = $(this).attr('href');
       $("html:not(:animated),body:not(:animated)").animate({ scrollTop: $(h).offset().top }, 1200);
    });

andyb · Accepted Answer · 2011-06-20T23:21:25.747

1

There seems to be a problem with the jquery.anchor.js library that is giving me Uncaught TypeError: Cannot read property 'top' of null jquery.anchor.js:32 in Chrome 14. I have commented it out and replaced the open function with:

$("div.ftropen").click(function(){
    $("div#connect").animate({height: "500px" }, "fast", function() {
        $("body").scrollTop( $("#connect").position().top);
    });                                    
    $("div#ftrconnect").fadeOut("fast");  //hide connectbtn
    $("div#ftrhide").fadeIn("fast");  //show hidebtn
    return false;
});

that scrolls the body to the top of the <div id="connect">

~~I'll see if I can get the anchor animate plugin working…~~

Actually the Anchor Slider plugin seems to be interfering with your <div> click events completely. The <a> click is occurring first and consuming the event. I think that you need to decide to use the Anchor Slider plugin to animate the "scroll to" or the jQuery animate() in your code.

Edit: If you remove the jquery.anchor.js script, use the following target

<div id="connect" style="height:0px; display:block;"><a style="display:block;margin-top:500px;height:100px;" id="target" name="target">f</a></div>

and this JavaScript:

$(document).ready(function() {
    $('div.ftropen').click(function(event){
        $('div#connect').animate({height: '500px' }, 'fast', function() {
            $('body').animate({scrollTop : $('#target').position().top + 500}, 700);
        });
        $('div#ftrconnect').fadeOut('fast');  //hide connectbtn
        $('div#ftrhide').fadeIn('fast');  //show hidebtn
        event.stopPropagation();
        return false;
    });
    $('div.ftrclose')
        .click(function(){
            $('div#connect').animate({height: '0px' }, 'fast');
            $('div#ftrhide').fadeOut('fast');  //hide hidebtn
            $('div#ftrconnect').fadeIn('fast');  //show connectbtn
        return false;
    });
});

which animates the scroll to the <a id="target"> when the <div> height animate has completed.

Edit2: Added a demo.

edited Jun 20 '11 at 23:21

answered Jun 20 '11 at 21:19

andyb

43,435
12
121
150

Thanks for your input, unfortunatly I can't get either of your solutions to auto scroll to the bottom of the div that opens. It doesn't appear to be working in the JS fiddle either. Thanks for your efforts. – patrick Jun 20 '11 at 22:26
Fixed demo link that now scrolls to the bottom of the div that opens. – andyb Jun 20 '11 at 22:31
also, without the jquery.anchor.js plugin active then the – patrick Jun 20 '11 at 22:31
Thanks andy, did the link change, still getting same results in jsfiddle. – patrick Jun 20 '11 at 22:32
The demo that scrolls to the bottom correctly is http://jsfiddle.net/C5SGW/2/ and you could remove the anchors if the `
` is handling the opening/closing and scrolling. Unless there is another reason you need them?
– andyb Jun 20 '11 at 22:36
That JSfiddle is not showing the screen position scrolling down to accommodating the expanding div. – patrick Jun 20 '11 at 22:41
Seems to be working OK for me in Chrome. There is nothing that should make it not work in other browsers though. Can anyone else try it please? – andyb Jun 20 '11 at 22:46
no you're right, that does work in chrome, not firefox though:( Sorry, I always debug with firebug. Wonder why tho, that doesn't make sense. ***Does work in safari, but not in IE. – patrick Jun 20 '11 at 22:50
Ah, damn sorry. I should have tested it in more than one browser. – andyb Jun 20 '11 at 22:56
Right, based on http://stackoverflow.com/questions/3042651/jquery-scrolltop-not-working-in-chrome-but-working-in-firefox/3042875#3042875, I have updated the demo link. Now works in Firefox :-) – andyb Jun 20 '11 at 23:21
ahhh html, body. Thats a billion andy. – patrick Jun 20 '11 at 23:38

jQuery scrollTop only works once

2 Answers2