Question

我已经开始使用CSS-Tricks中的代码，它可以很好地处理偏移量。问题是该站点有一个固定的标题，所以我需要它来导航到另一个页面的内部链接时应用偏移量。目前它正在被切断。

$('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
        || location.hostname == this.hostname) {

        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
           if (target.length) {
             $('html,body').animate({
                 scrollTop: target.offset().top-144
            }, 1000);
            return false;
        }
    }
});

非常感谢任何帮助。有问题的页面是http://marketingmo.wpengine.com/services/#brand-development

Answer 1

实际上没有本机js函数可以阻止页面加载时的哈希锚定。但是有一个很好的解决方法，可以在SO question找到它。我之前使用过这种方法，效果非常好。

setTimeout(function() {
    var hash = location.hash
    if (hash && $(hash).length) {
        var target = $(hash).offset().top;
        var headerH = $('header').height();
        $(window).scrollTop(target - headerH)
        /*
        //or with animate, 
        //but you'll need to reset the scrollTop to 0 (the top) first:
        $(window).scrollTop(0);
        $('html,body').animate({scrollTop:target - headerH}, 1000);
        */
    }
}, 1);

jQuery平滑滚动到其他页面上的链接与偏移

1 个答案: