jQuery轻松插件

Question

I would like to use JQuery easing to navigate to a named section in my page, and so far it works.

In one of the sections, I have a form which I would like to have centered vertically and horizontally, so I placed it in a sub-div, and vertically/horizontally centered it.

What I'm not sure how to do is to change the javascript so that when jumping to the form section, the form eases to the middle of the page.

I am using the following code block:

$('.nav a').bind('click',function(event){

    var $anchor = $(this);

    $('html, body').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top
    }, 1500,'easeInOutExpo');

    event.preventDefault();
});    
       ​

Here's a JSFiddle of what I have, can any one please enlighten me? Thanks!

http://jsfiddle.net/soraya_soch/LyDWH/

[EDIT]

My goal is when clicking on the link, that the page eases down and ceters the form's div.

Answer 1

Check this out, it does not set form div to center vertically ,that's what help in achieving to set the desired output as in above image since there also vertival center is not given

http://jsfiddle.net/LyDWH/3/

Made minor changes in CSS and HTML page

div.cn {
    display: table-cell;
    width: 960px;
    height: 2000px;
    background: gray;
    text-align: center;
}

div.inner {
    display: inline-block;
    width: 200px;
    height: 200px;
    background: red;
    margin-top: 20%;
}
​