Animated Scrolling Script Prevents Local Anchor Positions To Be Accessed From External Links

I have a onepager site where I use scrollmagic plus all its necessary plugins/libraries (and jQuery) for different effects where animation, pinning, fading processes etc. are trigg

Solution 1:

Well assuming scroll magic doesnt have extra functionality that is not posted here that would get in the way of my answer you could try this:

Add a data-attribute to your links which you want to use default behavior:

<a href="example.com/index.php#part3.php" data-default="true">

Check if that data attribute exists and if it does return true in your click handler to continue with the default behavior:

var sm_controller_1 = newScrollMagic.Controller();

sm_controller_1.scrollTo(function(anchor_id) {
        TweenMax.to(window, 2.0, {
                scrollTo: {
                        y: anchor_id
                        autoKill: true
                },
                ease: Cubic.easeInOut
        });
});
jQuery(document).on("click", "a[href^=#]", function(e) {
        if(e.currentTarget.dataset.default){
            returntrue;
        }
        var id = jQuery(this).attr('href');
        if(jQuery(id).length > 0) {
                e.preventDefault();
                sm_controller_1.scrollTo(id);
                if (window.history && window.history.pushState) {
                        history.pushState("", document.title, id);
                }
        }
});

Solution 2:

You can try and use this code:

jQuery(function ($) {
    $(document).ready(function() {// if needed, use window.onload which fires after this eventif(window.location.hash) {
            var hash = window.location.hash;
            $( 'a[href=' + hash + ']' ).click();
        }
    });
});

It will wait till the DOM (or the page) is loaded and then simulate the user click on the nav item.

After I've read your question one more time, I am not sure anymore if you want your page loaded on the position of the element which is listed in the anchor or the scroll wasn't working when coming from an external source?

If the scroll was working but you wanted to display the page at the right place, like a jump, then I propose 2 solutions:

a) use the CSS opacity:0; on the body and after the scroll is finished, set it back to opacity:1; b) try to jump on the proper place on the page before you load ScrollMagic