哈希链接后滚动

我的网站有一个固定的导航栏，当使用哈希（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);时，它正常工作。为什么当我在链接中加载散列的页面时，它不会滚动？任何和所有的输入是赞赏。

来源

2012-09-22 flyingarmadillo

是否'$（ 'HTML，身体'）。 animate（{'scrollTop'：$（getHash（））。offset（）。top + 20}，400）;'work？ – Jashwant

如何覆盖href值以hash标签开头的任何链接的默认功能？那是你感兴趣的东西吗？

$(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

来源

2012-09-22 16:52:36 Nicodemeus

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

我的网址现在这个样子：

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-22 16:58:57 flyingarmadillo

哈希链接后滚动

回答

相关问题