Question

我的网站有一个固定的导航栏，当使用哈希值（www.somesite.com/a_page#some_hash）跳转到页面上的某些元素时会导致问题。当页面跳转到散列元素时，固定的导航栏会覆盖元素的一部分。我正在努力使页面滚动到带有偏移量的元素：

function getHash() {
    var hash = window.location.hash;
    return hash; 
}

$(document).ready(function(){
    if (getHash()) {
        $(getHash()).fadeOut(300).fadeIn(300)
            .fadeOut(300).fadeIn(300)
            .fadeOut(300).fadeIn(300);
        scrollTo( 0, $(getHash()).offset().top + 200);
    }
})

现在，由于某些原因，scrollTo部分没有被解雇。正上方的部分（fadeOut＆amp; fadeIn部分）。当我在控制台中使用scrollTo行scrollTo( 0, $(getHash()).offset().top - 200);时，它可以正常工作。当我在链接中加载带有哈希的页面时，为什么不滚动？任何和所有输入都表示赞赏。

Answer 1

一个函数如何覆盖任何以href值以哈希标记开头的链接的默认功能？那是你感兴趣的东西吗？

$(document).ready(function() {
    $('a[href^="#"]').on('click', function(e) {
        // prevent the default behavior so your named anchors don't cause
        // a parent with an overflow to 'slide-under' it's parent.
        e.preventDefault();  
        $('html, body').animate({ scrollTop: $($(this).attr('href')).position().top }, 'slow');
    });
});

Fiddle proof of concept

Answer 2

哈希似乎是一个巨大的问题。特别是因为引用当前页面的散列链接不会重新加载页面。因此，它没有加载任何新内容。我刚刚决定摆脱哈希并使用查询参数来简化与哈希相关的所有问题。

我的网址现在看起来像这样：

www.some_site.com/some_page?element=3434

然后这个查询找到元素并使用偏移量滚动到它：

function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
        vars[key] = value;
    });
    return vars;
}

$(document).ready(function(){
    var post_url_param = getUrlVars()["element"];
    var hashed_element_id = '#' + post_url_param;
    if (post_url_param) { 
            $(hashed_post_id).fadeOut(300).fadeIn(300).fadeOut(300).fadeIn(300).fadeOut(300).fadeIn(300);
            scrollTo( 0, $(hashed_post_id).offset().top - 250);         
    }
})

散列链接后的Scrollto

2 个答案: