Javascript 动画滚动脚本阻止从外部链接访问本地锚点位置

我有一个onepager站点，在那里我使用scrollmagic以及所有必要的插件/库（和jQuery）来实现不同的效果，其中动画、固定、褪色过程等由滚动位置触发

我还将其用于动画滚动到页面上的定位点（从菜单和其他本地链接）-请参见下面脚本的相应部分

问题是，当单击本地链接时，此脚本会抑制默认行为“跳转”到主播点，显然，当通过直接链接或带有附加到URL的主播的书签从外部访问页面时（如

http://www.example.com/index.php#part3

）。尽管单击本地链接时需要此行为，但当从其他地方链接锚定时，它显然会阻止浏览器显示锚定位置

当单击上面示例中的链接时，是否有任何方法可以使浏览器直接显示该定位点位置

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）

好吧，假设scroll magic没有未发布的额外功能，这会妨碍我的回答，您可以尝试以下方法：

向要使用默认行为的链接添加数据属性：

<a href="example.com/index.php#part3.php" data-default="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);
                }
        }
});

---

您可以尝试使用以下代码：

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

它将等待DOM（或页面）加载，然后模拟用户单击导航项

在我再次阅读您的问题之后，我不确定您是否希望将页面加载到锚点中列出的元素的位置，或者当来自外部源时，滚动不起作用

如果滚动正常，但您希望在正确的位置显示页面（如跳转），那么我建议两种解决方案：

a） 使用CSS

opacity:0在主体上，滚动完成后，将其设置回
不透明度：1
b） 在加载ScrollMagic之前，请尝试跳转到页面上的正确位置
谢谢您的回答，并对我的反应太晚表示抱歉！问题是，指向锚的链接都在导航菜单中，因此当我按照您的建议执行操作时，链接的所有滚动动画都被禁用，导航链接直接跳转到锚，而无需滚动。因此，如果我只是停用动画滚动，这会给我相同的结果，我不想要。我只能将其应用于我自己放在那里的其他网站上的链接（包括数据属性），但如果有人设置书签或从我的网站复制URL，它将不起作用。不过还是要谢谢你！是的，这很有效！我只是使用了您发布的代码，下面没有任何建议，因为它已经按照我希望的方式工作了（即，当页面加载了URL中的锚时，直接跳到锚）。非常感谢你！