javascript - 动画滚动脚本防止从外部链接访问本地 anchor 位置

Question

我有一个 onepager 站点，我在其中使用 scrollmagic 及其所有必要的插件/库(和 jQuery)来实现动画、固定、淡入淡出过程等由滚动位置触发的不同效果。

我也将它用于页面上的动画滚动到 anchor (从菜单和其他本地链接)- 请参阅下面脚本的相应部分。

问题是这个脚本抑制默认行为点击本地链接时直接“跳转”到一个 anchor ，显然当页面从外部通过直接链接或带有附加到 URL 的 anchor 的书签(如 http://www.example.com/index.php#part3)。虽然在单击本地链接时需要这种行为，但当从其他地方链接 anchor 时，它显然会阻止浏览器显示 anchor 位置。

有没有办法让浏览器在点击上面例子中的链接时直接显示 anchor 位置？

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);
                }
        }
});

(创建 fiddle/codepen 没有意义，因为问题在于从外部源调用原始 URL)。

Answer 1

好吧，假设 scroll magic 没有未在此处发布的额外功能，这会妨碍我的回答，您可以试试这个:

将数据属性添加到您要使用默认行为的链接:

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

检查该数据属性是否存在，以及它是否在您的点击处理程序中返回 true 以继续默认行为:

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);
                }
        }
});