I'm trying to get the div to snap to the center of the viewport, right now it just snaps to the top. I was trying to put an offset of 50% but can only get it in px's.

EDIT

I added a new fiddle where I tried to include $(window).scrollTop() / 2)

/

$("#item").offset().top - 100

var body = $("html, body");
var items = $(".item");
var animating = false;

$(window).scroll(function() {
    clearTimeout($.data(this, 'scrollTimer'));
    if (!animating) {
        $.data(this, 'scrollTimer', setTimeout(function() {

            items.each(function(key, value) {
                if ($(value).offset().top > $(window).scrollTop()) {
                    animating = true;
                    $(body).stop().animate( { scrollTop: $(value).offset().top }, 1000,'swing');
                    setTimeout(function() { animating = false; }, 2000);
                    return false;
                }
            });
        }, 50));
    }
});

I'm trying to get the div to snap to the center of the viewport, right now it just snaps to the top. I was trying to put an offset of 50% but can only get it in px's.

EDIT

I added a new fiddle where I tried to include $(window).scrollTop() / 2)

http://jsfiddle/kZY9R/84/

$("#item").offset().top - 100

var body = $("html, body");
var items = $(".item");
var animating = false;

$(window).scroll(function() {
    clearTimeout($.data(this, 'scrollTimer'));
    if (!animating) {
        $.data(this, 'scrollTimer', setTimeout(function() {

            items.each(function(key, value) {
                if ($(value).offset().top > $(window).scrollTop()) {
                    animating = true;
                    $(body).stop().animate( { scrollTop: $(value).offset().top }, 1000,'swing');
                    setTimeout(function() { animating = false; }, 2000);
                    return false;
                }
            });
        }, 50));
    }
});

• javascript
• jquery

• 1 Your div currently snaps to the top of the vp, what do you mean by the middle? As far as I understand, middle of vp is $(window).height() / 2 – AGE Commented Jan 11, 2016 at 15:46
• 1 @AGE I just meant that I want them to snap at a point 50% from the top of vp. – user2252219 Commented Jan 11, 2016 at 16:03
• 1 Hey another question from you. I have fixed old with var body = $("html, body"); – Parth Trivedi Commented Jan 15, 2016 at 3:46
• 1 @ParthTrivedi This fiddle? jsfiddle/kZY9R/90. :) It still snaps to the top though, not middle. – user2252219 Commented Jan 15, 2016 at 14:08
• 1 @user2252219, check my answer to see if suits your need. – Ahmad Baktash Hayeri Commented Jan 19, 2016 at 19:07

3 Answers 3

I found this:

$('html, body').animate({scrollTop: $('#your-id').offset().top -100 }, 'slow');

Source: Run ScrollTop with offset of element by ID

Here's the trick to keep your viewport centralized on a particular div.

Prerequisites

You need to take into account the following three criteria to be able to centralize the viewport on a given item:

1. height of the last item that appeared on the viewport.
2. The distance of the last item from the top of the page, i.e. the offset().top of the item.
3. The height value of the viewport (i.e the window object).

Calculating Vertical Position of the Item

The required scrollTop value for the window can be calculated as in the following:

var scrollValue = itemOffset  // offset of the item from the top of the page
                  - .5 * windowHeight // half the height of the window
                  + .5 * itemHeight;  // half the height of the item

You are basically, moving the top of your viewport to the item under view's top offset initially. This, as you've already experienced, snaps the item to the top of the window.

The real magic part es when you subtract half of the window's height to go halfway along it vertically, and then shifting your view back down by adding half the item's height. This makes the item appear vertically centralized with regards to the viewport.

Note:

To be able to query the last item that appeared on the viewport, you have to iterate over all of the elements that have a top offset value (i.e. offset().top) less than or equal to that of the window's scrollTop value:

$.each($('.item'), function(i, value) {
   if ($(viewport).scrollTop() >= $(this).offset().top) {
        lastItemInView = $(this);
   }
});

With the above, the lastItemInView variable will always end up with the last element visible in the window.

Demo

Not sure if you figured this out yet or not but I took some code from this answer (How to tell if a DOM element is visible in the current viewport?) that shows how to tell if an element is visible in the view port.

Using that I modified your code to loop through each item and find the first visible one in the viewport and then center that one also factoring in the margin-top you have. Let me know if this helps!

Fiddle: http://jsfiddle/kZY9R/86/

var body = $("html, body");
var items = $(".item");
var animating = false;

$(window).scroll(function() {
    clearTimeout($.data(this, 'scrollTimer'));
    if (!animating) {
        $.data(this, 'scrollTimer', setTimeout(function() {

            items.each(function(key, value) {
                if (elementInViewport(value)) {
                    animating = true;
                    var margin = parseInt($(value).css('margin-top'));
                    $('html,body').animate({
                        scrollTop: $(value).offset().top - ($(window).height() + margin - $(value).outerHeight(true)) / 2
                    }, 200);
                    setTimeout(function() {
                        animating = false;
                    }, 2000);
                    return false;
                }
            });
        }, 50));
    }
});

function elementInViewport(el) {
    var top = el.offsetTop;
    var left = el.offsetLeft;
    var width = el.offsetWidth;
    var height = el.offsetHeight;

    while (el.offsetParent) {
        el = el.offsetParent;
        top += el.offsetTop;
        left += el.offsetLeft;
    }

    return (
        top < (window.pageYOffset + window.innerHeight) &&
        left < (window.pageXOffset + window.innerWidth) &&
        (top + height) > window.pageYOffset &&
        (left + width) > window.pageXOffset
    );
}