Question

I am working on a web application, whose mock-up page can now be found at: our server

If you click on the blue title “step1” and then choose the option of “delivery to address”, a form will show up using jQuery ajax load. No problem for this. Click on the “venue” radio button will take you to another form, no problem for this as well.

If you scroll down a bit, you can see a textarea, top of that you can see a link called “what’s this?”. Click on it and the textarea shall be filled with sample words.

The problem is, after clicking on the link, the webpage automatically scrolls to the top section. What I want is to keep the textarea to the center of screen after link is clicked.

I am trying to use a jQuery plugin called “scrollTo”, which can be found here

From its demo page I can tell is what I want. And here is my code to try using it:

function reloadDeliveryForm()
{
$('#deliveryForm').load('./ajax/deliveryToVenueForm.html', 
           function(response,     status, xhr) 
{
    if (status == "error") 
    {
        $.prompt("Sorry but there was an error, please try again.<br />" +
                 "If same error persists, please report to webmaster.");
    }
    else    //deliveryForm loaded successfully
    {
        validateDeliveryForm();
        $("#delivery_special").elastic();
        $('#special_conditions_tip').click(function()
        {
            console.log("start filling");
            fillTextareaWithExample();
            console.log("end filling");
            $.scrollTo('#delivery_special');
            console.log("end scrolling");
        });
    }
});

}

From Firebug output I can tell the scrollTo function is called, but doesn’t work. I’ve switched jQuery back to version 1.3.2, which is used on the demo page of the plugin, but that wouldn’t help, either.

Is there a problem with my coding? Which technique would you use to resolve this problem?

Any suggestion is much appreciated.

Answer 1

Approx. line 112 of your custom.js, change this

$('#special_conditions_tip').click(function()
{
    console.log("start filling");
    fillTextareaWithExample();
    console.log("end filling");
    $.scrollTo('#delivery_special');
    console.log("end scrolling");
}); 

to this

$('#special_conditions_tip').click(function(event)
{
    event.preventDefault();
    console.log("start filling");
    fillTextareaWithExample();
    console.log("end filling");
    $.scrollTo('#delivery_special');
    console.log("end scrolling");
}); 

.preventDefault() prevents the browsers action from taking place.