Question

Been working on a personal site lately and using jQuery ScrollTop to animate my content div. But I’ve ran into a problem.

• 1st: there is a strange padding in the top of every involved

• 2nd: the scroll is not consistent, ie. it doesn’t scroll the same height every time.

You can see the page here: http://mnpwr.dk/v2/index.html

– I added a red border around, so it would be easier to see the problem.

The jQuery:

jQuery.noConflict();

jQuery(document).ready(function () {
    getHash();
});

// Keep track of our current state
currentSection = 1;

function getHash() {

    jQuery('.scroll').on('click', function () {
        // Get our new state
        var gethash = jQuery(this).attr('class').split(' ')[0];
        // Calculate the difference, with element height of 500px using formular dest = (newPows - currentPos) * elmHeight
        var scrollTop = (gethash - currentSection) * 500
        jQuery('#contentDiv').animate({
            scrollTop: scrollTop
        }, 500);

        return false;

    });

}

Answer 1

Just add in CSS

p{
 margin:0px;
}

Hope this clarifies your ‘problem’

Your next problem is that if you have elements which height is 500px, if you add a red border 1px than the element’s height will actually be 502 🙂
So if you animate 500 by 500, the position will not be precise.

Just a suggestion, use .position() to get an element position and animate scrollTop to that retrieved value

LIVE DEMO