在新页面上加载Javascript将一个锚点移动到一个顶部固定元素下面

我只是在学习JavaScript（字面意思），并且我有一点JS（下面）将页面锚点从顶部向下移动90个像素该页面，以防止锚的内容被固定顶部元素重叠。点击同一页面上的锚点链接时，它的效果非常好。在新页面上加载Javascript将一个锚点移动到一个顶部固定元素下面

我遇到的问题是当我点击指向不同页面上的锚点的链接时。当新页面加载时，锚点会加载到页面的顶部，并部分隐藏在固定顶部元素的下方。

我怀疑我需要在检查锚定哈希值的每个页面上都有一些onLoad事件，但我太新了，无法解决这个问题。

任何帮助表示赞赏，谢谢！

统计信息：我正在为我公司的Web帮助做这件事。我们有大约280多个帮助页面和2,500个锚点。我希望将一些JS添加到包含或标题将解决我的问题。

注意：我使用的脚本是作为不同的计算器问题的答案而发现的，并且被轻微修改。

$(function(){ 
    $('a[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) { 
     var targetOffset = target.offset().top - 90; 
     $('html,body').animate({scrollTop: targetOffset}, 1000); 
     return false; 
     } 
    } 
    }); 
});

来源

2011-05-27 Mike K.

其实我有一些CSS解决了这个（我添加了一个类来我所有的主播）：

a.target 
{ 
    position: relative; 
    border-top: 90px solid transparent; 
    background-clip: padding-box; 
    margin: -100px 0 0; 
} 

a.target:before 
{ 
    content: ""; 
    position: absolute; 
    top: -90px; 
    left: 0; 
    right: 0; 
    border-top: 2px solid #ccc; 
}

来源

2013-01-21 21:02:53

如果我理解正确，您希望此举在页面加载时发生，而不仅仅是在单击链接时发生。如果是这样的话，您将需要使用each（）函数而不是click（）。只需将.click替换为.each，并在页面加载后发生。此外，用双引号将你的href匹配包裹起来以保证安全。

$('a[href*="#"]').each(function() {...

来源

2011-05-27 21:52:54 ventaur

这应该工作得很好。经过Firefox和Chrome测试。

$(function(){ 
    if(location.hash !== "") { 
    window.scrollTo(0,window.pageYOffset-90); 
    } 
});

来源

2011-05-27 21:53:24 mbxtr

这适用于短短的一秒钟。但是，在偏移页面加载页面后，页面重置为将目标定位点置于页面顶部（因此它被顶部固定元素隐藏）。我甚至将它设置为偏移到页面的底部，并且我可以在所有内容移动之前简要查看页面底部的内容。 – 2011-05-30 16:48:50

我用Firebug做了一步。我可以看到，window.scrollTo正在工作，并将内容放在我想要的位置，但在关闭后}处理if语句时，内容将重置为window.scrollTo行之前的位置。也许我没有正确实施 - 你有什么建议吗？ – 2011-05-30 22:01:20

您可能需要将window.scrollTo放在setTimeout函数中，并允许有一个小的延迟（我敢肯定，小于500ms的东西可以工作）。可能不是最好的解决方案，但它是目前我能想到的最好的解决方案。如果我有机会尝试更多，我会看看是否有更好的方法。 – mbxtr 2011-05-31 21:38:10

在新页面上加载Javascript将一个锚点移动到一个顶部固定元素下面

回答

相关问题