Scrolling animation breaks links on page

Question

I replaced the scrolling animation of my one page website with another scrolling animation which changes the URLs when you use the topbar (it was build in foundation)

While the URLs now change when I click an item in the topbar all the other links or clickable elements on my page make it scroll back to the top of the page.

For example when I try to click the next/prev buttons of my slider it scrolls back to the top of the page as if I clicked on Home.

Can someone see whats wrong with the code for the animation?

$(document).ready(function () {
    $('a[href^="#"]').click(function () {
        var target = $(this.hash),
            hash = this.hash;

        if (target.length == 0) {
            target = $('a[name="' + this.hash.substr(1) + '"]');
        }
        if (target.length == 0) {
            target = $('html');
        }

        $('html, body').animate({
            scrollTop: target.offset().top
        }, 500, function () {
            location.hash = hash;
        });

        return false;
    });
});

PS: When I scroll manually the URLs don't change when I go down to the next page. If anyone has a fix for this I'll be happy to here from you! (I tried using history.js but that only seems to work if you have a server, which I don't)

//* EDIT *// I just found out it's not all links that make it scroll to the top of the page, just the buttons of my orbit slider and the menu button when the topbar is collapsed

//EDIT 2// The URL now changes when I scroll to the next page! The only problem I am seeing right now is that the buttons of my orbit slider and the menu button of the collapsed topbar act the same as my home button (makes the page scroll all the way back to the top) for some reason. So the last thing I need to do is get the buttons working again. Making the menu button expand the topbar and making the next and prev buttons of my slider work as normal

Answer 1

If you only want to change the hash depending on the scrollPosition you are half way there.

You'll need to bind some logic to the scroll event. Here is a fork of your Fiddle where the hash is changed on scroll.

When the user scrolls the page we iterate through all .page elements and compare their offset().top against $( document ).scrollTop().

We set the new hash to be the id of the last .page element that has a lower offset().top than $( document ).scrollTop() is.

(I also debounced the function so it doesn't fire constantly when scrolling - you could of course remove that part)

You should however consider that by changing the hash you will jump to the equivalent element. Here is a guide on how to suppress that behaviour.

EDIT:

Here is an updated Fiddle where I implemented the solution from above for suppressing forced scroll on hash change.