Dynamic page anchor slider glitch

Question

So, my page anchors use a jquery script to slide the page around to the various anchors but the problem is when you go back to top to go to a different anchor the page glitches and i cant seem to fix it.

I have the feeling that the problem has something to do with html trying to go straight to the page anchor before the jquery has time to act, or its a really obvious error and i should probably stop coding.

Link to the problem: http://beta.morriscommunications.com.au/ (too much code to post here.)

I would prefer if any potential solutions could just be implemented into the code its self.

Cheers.

Edit: This site is best viewed in google chrome because that is what i have mainly developed it for.

Answer 1

Here is a short codepen about your solution, which is done right. Always have first priority to load jquery before loading any of its library. async feature of link tag may help you with that.

Also this code works for me on mostly every website,

$('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
        || location.hostname == this.hostname) {

        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
           if (target.length) {
             $('html,body').animate({
                 scrollTop: target.offset().top
            }, 1000);
            return false;
        }
    }
});

While looking at your code, i found very less html5 tags, use them,they are friendly now-a-days with every browser.

Answer 2

$(".abo").click(function() {
   event.preventDefault(); <---- this will help you
   scrollToAnchor('abo');
});

Also I noticed you are using classes for navigation, and you have multiple id's with same name, that's bad.

I recommend you to use one function for navigation. Use "this" and get clicked elements class/id/data attribute and use it to navigate to anchor, that will save you code.