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

Answer 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.