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

Question

我有一个单页网站，我在其中使用 scrollmagic 加上所有必要的 plugins/libraries（和 jQuery）来实现动画、固定、淡入淡出等不同效果进程等由滚动位置触发。

我也将它用于动画滚动到页面上的锚点（从菜单和其他本地 links） - 请参阅相应部分下面的脚本。

问题是当单击本地 link 时，此脚本 将 "jumping" 的默认行为 直接抑制到锚点，显然也该页面可通过直接 link 或书签从外部访问，并在 URL 上附加一个锚点（如 http://www.example.com/index.php#part3）。尽管单击本地 link 时需要此行为，但当从其他地方 link 编辑锚点时，它显然会阻止浏览器显示锚点位置。

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

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">

检查该数据属性是否存在以及它是否存在 return 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);
                }
        }
});

Answer 2

您可以尝试使用此代码：

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（或页面）加载完毕，然后模拟用户点击导航项。

在我再次阅读你的问题后，我不再确定你是否希望你的页面加载到锚点中列出的元素的位置，或者当来自外部来源？

如果滚动正常，但你想在正确的位置显示页面，比如跳转，那么我提出 2 个解决方案：

a) 在 body 上使用 CSS opacity:0; 滚动完成后，将其设置回 opacity:1; b) 在加载 ScrollMagic

之前尝试跳转到页面上的正确位置

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

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

html

javascript

jquery

scroll

scrollmagic