.scrolltop

[ericburnard]

Hi there, I am needing a bit of advice.

 

I am currently working on a new site, and I have my links at the top in a fixed header, and the rest of my content throughout the same page. http://sr.bluepigeon.com have a look it will make more sence then me describing it. Now i have worked a little bit with jQuery but do not know all the ins and outs of it, which is why I am a bit stuck. Now when I click one of the links on the page, I want the page to scroll down to that div and display it in the center of the screen. Now the code I am using (see below) obviously works on my laptops screen size but won't be as 'perfect' and centered on other sized screens. If i user the following code without each of the offsets then it will scroll to the correct div, but it will be displayed on the top of the page and not centered in the middle. 

 

What I am wanting to know, is, is it possible to make it scroll to a div and then center the div in the middle of the screen? If not how could i get as close as possible to this?

$(document).ready(function(){
$("#blogl").click(function() {
    $('html, body').animate({
        scrollTop: $("#blog").offset().top
    }, 2000);
});
$("#racel").click(function() {
    $('html, body').animate({
        scrollTop: $("#race").offset().top
    }, 2000);
});
$("#aboutl").click(function() {
    $('html, body').animate({
        scrollTop: $("#about").offset().top +700
    }, 2000);
});
$("#srl").click(function() {
    $('html, body').animate({
        scrollTop: $("#sr").offset().top +100
    }, 2000);
});
$("#donatel").click(function() {
    $('html, body').animate({
        scrollTop: $("#donate").offset().top
    }, 2000);
});
});

Thanks for your help again

 

Eric