Question

我正在使用bootstrap的scrollspy更改页面滚动时突出显示的导航栏项目，然后使用history.replaceState将哈希添加到网址。 This question给了我这个部分的想法。我还使用一些jquery在单击导航项时实现“平滑滚动”，并且在“平滑滚动”到锚点时关闭scrolllspy，然后将哈希添加到url并重新打开scrollspy。

scrollspy部分工作正常，单击导航链接时出现问题。它在Chrome和Firefox中的预期效果如预期，但在IE 10＆amp; 11当点击链接时，它会在网址中的哈希值之前添加undefined，而我无法解决原因。

这是我的剧本：

//initiate scroll spy
$('body').scrollspy({ target: '.spy-active', offset: $offset + 1 });
$('.spy-active').on('activate.bs.scrollspy', function (e) {
    if (history.replaceState) {
    history.replaceState(null, "", $('a[href*=#]:not([href=#])', e.target).attr("href"));
    }
});

//smooth scroll
$('a[href*=#]:not([href=#])').click(function (e) {
    e.preventDefault();
    //deactivate scrollspy for duration of transition
    $('nav').removeClass('spy-active');

    //remove active class from all list items
    $('li').each(function () {
        $(this).removeClass('active');
    });
    //add active class to clicked item
    $(this).parent().addClass('active');
    var target = this.hash;
    var $target = $(target);
    $('html, body').stop().animate({
        'scrollTop': $target.offset().top - $offset
    }, 500, 'swing', function () {
        if (history.replaceState) {
            history.replaceState(null, "", target);
        }
        //reactivate scrollspy
        $('nav').addClass('spy-active');
    });
});

我的网站是here

Answer 1

当您点击导航链接时，此行在IE中执行：

history.replaceState(null, "", $('a[href*=#]:not([href=#])', e.target).attr("href"));

如果e.target内未找到任何链接，则.attr("href")的结果为undefined。因此，您需要检查是否找到了链接，然后拨打history.replaceState：

var matchLink = $('a[href*=#]:not([href=#])', e.target);
if(matchLink.length) {
    history.replaceState(null, "", matchLink.attr("href"));
}

history.replaceState undefined IE11

1 个答案: