0

我的网站有一个固定的导航栏，当使用哈希 (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部分由于某种原因没有开火。正上方的部分（淡出和淡入部分）。当我在控制台中使用 scrollTo 行时，scrollTo( 0, $(getHash()).offset().top - 200);它可以正常工作。为什么当我在链接中加载带有哈希的页面时它不滚动？任何和所有输入表示赞赏。

4

2 回答 2

0

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

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

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);         
    }
})
于 2012-09-22T16:58:57.400 回答
0

一个覆盖任何链接的默认功能的函数怎么样？它的 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');
    });
});​

小提琴概念证明

于 2012-09-22T16:52:36.517 回答