Scroll to link with skrollr

Question

I am using https://github.com/Prinzhorn/skrollr to animate the background of my site as I scroll. However I am also wanting to have my links scroll up and down the page like a normal single page site would do.

The problem is that both are working if I manually scroll the background changes, if I click the link the page scrolls to the correct place. The problem is that when I click the button the background doesn't scroll as well.

It seems like I am working with two different scroll functions and as a result they aren't working together and I need to use the same one.

Here is the code.

js - Scroll to link:

var $root = $('html, body');
    $('a').click(function() {
        var href = $.attr(this, 'href');
        $root.animate({
            scrollTop: $(href).offset().top
        }, 500, function () {
            window.location.hash = href;
        });
        return false;
    });

js – Skrollr init

skrollr.init({
    smoothScrolling: true,
    forceHeight: true
}); 

I will try put together a fiddle to make it more clear but hopefully the answer is really simple.

Answer 1

If anyone else ever faces this problem the answer lies her: https://github.com/Prinzhorn/skrollr-menu

This will allow you to scroll to you internal links along with Skrollr animations. A HUGE plus and a very simple fix, you don't even need any of your own scrolling code just this and it will work with you links.