Question

我有一个单页网站，其中position: fixed;标题包含主要导航。我正在使用this plugin通过主导航滚动到每个部分。由于固定标头我需要设置offset =标头的高度。使用此初始化一切正常：

$('.nav-main a').click(function(e) {
    e.preventDefault();
    var anchorLocation = $(this).attr('href');
    $.scrollTo(anchorLocation, 700, {
        offset: -86
    });
});

但是我需要网址来包含部分ID，例如http://domainname.com/#about，每个链接都包含在href中，例如<a href="#about">About</a>所以我用这个：

$('.nav-main a').click(function(e) {
    e.preventDefault();
    var anchorLocation = $(this).attr('href');
    $.scrollTo(anchorLocation, 700, {
        offset: -86,
        onAfter: function() {
             window.location.hash = anchorLocation;
        }
    });
});

因此，修复了URL，但是有时它会在光滑滚动完成时消失，但如果再次滚动并且offset无法正常工作，它将会重新进入视图。有什么想法吗？

修改

有人发布了下面的解决方案，但后来删除了它，但它的工作方式是不必使用插件，但offset仅适用于IE 8/9中的Webkit浏览器（Chrome，Safari）。 Firefox一旦滚动动画停止，它将尊重offset大约一毫秒，然后捕捉到视口的顶部。

var headerHeight = $('[role="banner"]').outerHeight() -1;

$('.nav-main a').click(function(e) {
    e.preventDefault();
    scrollToID($(this).attr('href'));
});

function scrollToID(ID){
    $('html, body').animate({
        scrollTop: $(ID).offset().top - headerHeight
    }, 700, function() {
        window.location.hash = ID;
    });
}

使用window.location.hash时无法使用scrollTo偏移量

0 个答案: