This little feature can be very handy if you want to auto scroll the page to a particular section. I have used this previously on sites where I want the user to be shown error messages that are on top of a large form. So instead of the user clicking submit and nothing happening the user would click submit and if there were any errors the page would scroll to the error messages on the top of the form.

To achieve this effect create a javascript function like this:
(Thanks to David King from OneDayLater.com for the Opera fix for the button click event!)

function goToByScroll(element) {
    var el = $.browser.opera ? $("html") : $("html, body");
    el.animate({ scrollTop: $(element).offset().top }, 'slow');
}

Now call the above function whenever you want the screen to move to a point. For our example we will scroll on a button click or from a link click using the code below:

$(document).ready(function () {
        //scroll if link click to section2
        $('#Section1 a').click(function (evt) {
            evt.preventDefault();
            goToByScroll('#Section2');
        });
        
        //scroll if button click to section 1 
        $('#SubmitForm').click(function (evt) {
            evt.preventDefault();
            goToByScroll('#Section1');
        });
});

You can view a working demo of this in action here. Simply Right Click and View Source to see the code.

[Feb 24 Update] Looks like we're back in business. Needed to re-install BlogEngine before I could get it to work and then I had to remove the old theme my site had as it was not compatible, which is a shame. Looks like the theme situation for BlogEngine hasn't improved much since my post 6 months ago on where to get good blog engine themes.

Just a quick mention to let you know that the comments system is down on my site at the moment. I'm not sure what happened but I think it has something to do with my failed attempt at upgrading to blog engine 1.6 last weekend. I will take a look into upgrading to BlogEngine 1.6 again over the next few days if I have time. I will also upgrade my server to IIS 7 with my provider...which should be fun if any past upgrades are anything to go by :D

At the moment I am currently very busy finishing up a big new project for Hertz. It should be going live in around 2 weeks. Once it's up I should have more time to blog about all the new jquery techniques I've learned during developement.

If you have a checkbox on your form that has to be selected before you want the user to continue you can use jquery to check if it has been selected by doing something like the following:

$(document).ready(function () {
        $('#SubmitForm').click(function () {
            if ($('#Terms').attr('checked') == false) {
                alert('please select the terms and conditions before continuing.')              
                return false;
            }
        });
    });

Your html form must have a checkbox with an id value of Terms to match the javascript above.

    Please accept our terms and conditions
    
    

If it is crucial to have a checkbox ticked before continuing in your website or app you should validate on the server side as well but the above script should help to get you started.

Click here for a simple demo of this in action.