Scroll to ID on page not calculating offset correctly

Question

$('.home-slide-button').on('click', function (e) {
var matches = window.location.hash.match(/^#([0-9]+)$/);
if (matches) {
    var number = matches[1];
    $('html, body').animate({
        scrollTop: $('#' + number).offset().top -150
    }, 1500);
}
});

When clicking on a product link in the "Home" Page (http://buchbinderei.it/) it should redirect to the "Produkte" Page (http://buchbinderei.it/produkte/) an scroll down smoothly to the clicked Product. Some how it doesn't calculate the top -150 offset… Any suggestions?

Actual Wrong Offset Position: https://www.dropbox.com/s/m3cbinuyl4d3pgv/Screenshot%202016-01-24%2022.47.55.png?dl=0

Desired Offset Position: https://www.dropbox.com/s/y0lhldjvult9kdg/Screenshot%202016-01-24%2022.48.49.png?dl=0

This wont work if you are redirecting to a different page, the code in your click event will effectively stop once your page redirects, JS code does not carry over to newly loaded pages. You need this on a load event on the "Produkte" page (and [disable the hash anchor jump](http://stackoverflow.com/questions/3659072/how-to-disable-anchor-jump-when-loading-a-page)) — Patrick Evans, Jan 25 '16 at 04:02

score 0 · Answer 1 · answered Jan 25 '16 at 19:21

This solved my problem:

if (location.hash) {
    setTimeout(function() {
        var matches = window.location.hash.match(/^#([0-9]+)$/);
        if (matches) {
            var number = matches[1];
            $('html, body').animate({
                scrollTop: $('#' + number).offset().top -180
            }, 500);
            console.log('enter');
        }
    }, 1);
}

Scroll to ID on page not calculating offset correctly

1 Answers1