Question

我有一个使用UI Layout和Fancytree的独立HTML文件（未托管）。我尝试使用Python的SimpleHTTPServer进行托管，我遇到了同样的问题。树用于导航，因此其节点都是锚链接。单击锚点链接时，将调用goToLink函数，主UI布局窗格将动画滚动到正确的锚点，并且单击的链接将添加到浏览器的历史记录中，以便用户可以使用按钮。这个工作符合要求，直到Chrome版本47.我已经尝试了以下代码的几种变体，但是当按下后退按钮时我总是得到相同的结果。也就是说，URL在地址栏中更改，但页面不会跳回到正确的锚点。这也是Firefox中的问题，但我不确定它破坏了哪个版本的Firefox。我不关心IE。

function goToLink(link) {
    if(link.slice(0, 1) != "#") {
        link = "#" + link;
    }

    var a = $('[name="' + link.slice(1) + '"]');
    var parent = a.parent();
    var pane = a.closest('.ui-layout-center');
    var aTop = a.offset().top;
    var paneTop = pane.offset().top;

    pane.animate({scrollTop: '+=' + (aTop - paneTop) + "px"}, 1000, "linear");
    var currentLocation = pane.scrollTop();
    window.location.hash = link;
    pane.scrollTop(currentLocation);
}

Answer 1

看起来这个问题与Chrome最近推出的Scroll Restoration有关。我通过检测该功能并跟踪哈希更改来解决问题。这也解决了Firefox中的问题：

var hashAlreadyChanged = false;
var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
var goToLinkOnHashChange = 'scrollRestoration' in history || isFirefox;

$(window).on('hashchange', function() {
    if(goToLinkOnHashChange) {
        goToLink(window.location.hash);
        hashAlreadyChanged = false;
    }
});

function goToLink(link) {
    if(link.slice(0, 1) != "#") {
        link = "#" + link;
    }

    if(!hashAlreadyChanged) {
        hashAlreadyChanged = goToLinkOnHashChange;

        var aName = isFirefox ? decodeURI(link) : link; // Firefox auto encodes the URL so I decode to get the correct "a" tag name
        var a = $('[name="' + aName.slice(1) + '"]');
        var pane = a.closest('.ui-layout-center');
        var aTop = a.offset().top;
        var paneTop = pane.offset().top;

        pane.animate({scrollTop: '+=' + (aTop - paneTop) + "px"}, 1000, "linear");

        var currentLocation = pane.scrollTop();
        window.location.hash = link;
        pane.scrollTop(currentLocation);
    }
}

从Chrome 47

1 个答案: