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

Question

我有一个单页网站，使用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时，创建小提琴/ CodePen 没有意义。）

- Johannes

Answer 1

假设滚动魔法（Scroll Magic）没有额外的功能会影响我的回答，您可以尝试以下方法：在您想使用默认行为的链接中添加一个数据属性：

```html

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

```

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

- pizzarob

---

感谢您的回答，很抱歉我反应晚了！问题在于锚点链接都在导航菜单中，所以当我按照您的建议去做时，所有链接的滚动动画都被禁用了，导航链接直接跳转到锚点而没有滚动。这使得我得到的结果与我简单地停用动画滚动相同，而我不想要这样的结果。我只能将其应用于我自己放置的其他网站上的链接（包括数据属性），但如果有人设置书签或从我的网站复制URL，则无法使用它。但还是谢谢！ - Johannes

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

在我再次阅读您的问题后，我不确定您是否希望页面加载到锚点中列出的元素位置，还是当从外部源进入时滚动不起作用？

如果滚动起作用但您想在正确的位置显示页面，就像跳转一样，那么我提出两个解决方案：

a）在body上使用CSS opacity:0;，滚动完成后将其设置回opacity:1; b）在加载ScrollMagic之前尝试在页面上跳转到适当的位置

- dev_masta

---

是的，这个可行！我刚刚使用了您发布的代码，而没有使用下面的建议，因为它已经按照我想要的方式工作（即在URL中加载锚点时直接跳转到锚点）。非常感谢！ - Johannes