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.

Stokehold

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.

Stokehold

Answer 2

There's a way to do this, Skrollr has some methods very useful, in console, just type the variable contains skrollr, it will show some methods that you can use, one of them is "setScrollTop(int, bool)", so just call this method with the info you need, for example:

s.setScrollTop(9000, true)

Which means that I want it to scroll to the height position 9000. It works fine, you just need to know the height position where you need to go.

Looming