animated scrolling script prevents local anchor positions to be accessed from external links

Question

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 triggered by scroll positions.

I also use it for animated scrolling to the anchor points on the page (from the menu and from other local links) - see the according part of the script below.

The problem is that this script suppresses the default behaviour of "jumping" directly to an anchorpoint when a local link is clicked, and apparently also when the page is accessed from outside via a direct link or bookmark with an anchor appended to the URL (like http://www.example.com/index.php#part3). Altough this behaviour is desired when clicking a local link, it obviously prevents the browser from displaying the anchor position when an anchor is linked from somewhere else.

Is there any way to make the browser directly display that anchor position when a link like in the above example is clicked?

var sm_controller_1 = new ScrollMagic.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) {
        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);
                }
        }
});

(It doesn't make sense to create a fiddle/codepen since the problem lies in calling the original URL from an external source).

score 2 · Answer 1 · answered Mar 24 '16 at 01:14

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 = new ScrollMagic.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){
            return true;
        }
        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);
                }
        }
});

Thanks for your answer and sorry for my late reaction! The problem is that the links to the anchors are all in the nav menu, so when I do what you propose, all scrolling animation for the links there is deactivated, the navigation links jump directly to the anchors without scrolling. So this gives me the same result if I would simply deactivate the animated scrolling, which I don't want. I could only apply that to links on other websites that I put there myself (including the data-attribute), but if someone sets a bookmark or copies the URL from my site, it won't work. But thanks anyway! — Johannes, Mar 26 '16 at 17:58

score 1 · Accepted Answer · answered Mar 30 '16 at 01:31

You can try and use this code:

jQuery(function ($) {
    $(document).ready(function() {// if needed, use window.onload which fires after this event
        if(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

Yes, this works! I just used the code you posted, none of the suggestions below, since it already works the way I want it to (i.e. jumping directly to the anchor when the page is loaded with an anchor in the URL). Thank you very much! — Johannes, Mar 30 '16 at 14:10

animated scrolling script prevents local anchor positions to be accessed from external links

2 Answers2

Linked