JQUERY .scrollTop help and advice

[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 (Already centered horizontally but would like it vertically as well). 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);
});
});

[Paulie_D]

The link does not seem valid right now…it seems to be a domain for sale.

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?

Is the div not centered already?

I don’t understand.

[ericburnard]

Sorry about the link. It is http://sr.bluepigeon.co.uk.

The divs are centered horizontally already,. What I am wanting is that when you click on a link, the page scrolls down to the div and displays it vertically centered as well. Sorry about the bad explaining. Hopefully it will make more sense when you see the link

[shaneisme]

I’m using Chrome, and when clicking on links they do slide to the vertical center of the screen for me… but only when I’m at full screen on my big monitors (2560×1600).

Any smaller and things start to break down pretty horrifically.

Designs like this will always reach their breaking point, you can’t keep all content perfectly centered no matter what on all screens… so it’s best to set up some media queries to set things up without all the margins, etc. and make yourself a normal scrolling site when your content starts to break the navigation. Just my two cents :)

[Author]

Posts