Question

140

jQuery scrollTo - Center Div in Window Vertically

rated 0 times [ 147] [ 7] / answers: 1 / hits: 18915 / 12 Years ago, tue, june 5, 2012, 12:00:00

I have a site that uses a fixed menu on the top of the page.

When a link is clicked, it should scroll vertically so that the center of that target div aligns with the vertical center of the window, offset by the height of the header.
- this is very important so that the div is centered no matter what the resolution of the monitor is

I'm using jQuery and scrollTo, but can't figure out the math needed for this.

Here's my attempt:

function scrollTo(target) {

var offset;

var scrollSpeed = 600;



if (viewport()[width] > 767 && !jQuery.browser.mobile) {

    // Offset anchor location and offset navigation bar if navigation is fixed

    offset = $(target).offset().top - document.getElementById('navigation').clientHeight;

} else {

    // Offset anchor location only since navigation bar is now static

    offset = $(target).offset().top;

}



    $('html, body').animate({scrollTop:offset}, scrollSpeed);

}

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kaceyr

Add To Favorites

Follow

Total Points: 510

Total Questions: 97

Total Answers: 116

Location: Solomon Islands

Member since Fri, Oct 8, 2021

3 Years ago

kaceyr questions

1 TypeScript Expected 1 arguments, but got 2

Wed, Dec 15, 21, 00:00, 3 Years ago

1 How to show input fields based on mat radio button selection in angular material

Wed, Jun 24, 20, 00:00, 4 Years ago

1 How to change variable value in index.html based on the environment in angular

Thu, Feb 6, 20, 00:00, 4 Years ago

1 react dynamic import using a variable doesn't work

Sat, Oct 12, 19, 00:00, 5 Years ago

1 puppeteer-cluster: queue instead of execute

Mon, Aug 5, 19, 00:00, 5 Years ago

View All

answered 12 Years ago viridianaw · Accepted Answer

Eventually figured it out. Was just being dumb with the math. Offset with the fixed header and footer as well, works for all resolutions.

    // scrollTo: Smooth scrolls to target id

function scrollTo(target) {

    var offset;

    var scrollSpeed = 600;

        var wheight = $(window).height();

        //var targetname = target;

        //var windowheight = $(window).height();

        //var pagecenterH = windowheight/2;

        //var targetheight = document.getElementById(targetname).offsetHeight;



    if (viewport()[width] > 767 && !jQuery.browser.mobile) {

        // Offset anchor location and offset navigation bar if navigation is fixed

        //offset = $(target).offset().top - document.getElementById('navigation').clientHeight;

                offset = $(target).offset().top - $(window).height() / 2 + document.getElementById('navigation').clientHeight + document.getElementById('footer').clientHeight;

    } else {

        // Offset anchor location only since navigation bar is now static

        offset = $(target).offset().top;

    }



    $('html, body').animate({scrollTop:offset}, scrollSpeed);

}