动画滚动脚本防止从外部链接访问本地锚位置 [英] animated scrolling script prevents local anchor positions to be accessed from external links

问题描述

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

I have a onepager site where I use scrollmagic plus all its necessary plugins/libraries (and jQuery) for different effects where animation, pinning, fading processes etc. are triggered by scroll positions.

我还使用它来动画滚动到页面上的锚点(从菜单和其他本地链接) - 请参阅下面脚本的相应部分.

I also use it for animated scrolling to the anchor points on the page (from the menu and from other local links) - see the according part of the script below.

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

The problem is that this script suppresses the default behaviour of "jumping" directly to an anchorpoint when a local link is clicked, and apparently also when the page is accessed from outside via a direct link or bookmark with an anchor appended to the URL (like http://www.example.com/index.php#part3). Altough this behaviour is desired when clicking a local link, it obviously prevents the browser from displaying the anchor position when an anchor is linked from somewhere else.

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

Is there any way to make the browser directly display that anchor position when a link like in the above example is clicked?

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).

(It doesn't make sense to create a fiddle/codepen since the problem lies in calling the original URL from an external source).

推荐答案

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

You can try and use this code:

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

It will wait till the DOM (or the page) is loaded and then simulate the user click on the nav item.

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

After I've read your question one more time, I am not sure anymore if you want your page loaded on the position of the element which is listed in the anchor or the scroll wasn't working when coming from an external source?

如果滚动条有效，但您想在正确的位置显示页面，例如跳转，那么我提出两种解决方案:

If the scroll was working but you wanted to display the page at the right place, like a jump, then I propose 2 solutions:

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

a) use the CSS opacity:0; on the body and after the scroll is finished, set it back to opacity:1; b) try to jump on the proper place on the page before you load ScrollMagic

这篇关于动画滚动脚本防止从外部链接访问本地锚位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！