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

Question

我有一个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);
                }
        }
});

(创建小提琴/编码器是没有意义的,因为问题在于从外部源调用原始URL).

Answer 1

您可以尝试使用此代码：

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) 在 body 上使用 CSS，opacity:0;滚动完成后，将其设置回 opacity:1; b) 在加载 ScrollMagic 之前尝试跳转到页面上的正确位置