javascript - 如何使用 "fixed" header 使 anchor 标记直接指向页面上的正确位置？

Question

我有一个网站 position: fixed;始终显示在页面顶部的 header div。

<div id="header"></div>  

<section id="aso">
*text text with around 400px + height * 
</section>

<section id="one">
*text text with around 400px + height * 
</section>

<section id="two">
*text text with around 400px + height * 
</section>

<section id="three">
*text text with around 400px + height * 
</section>

标题中带有重定向到 www.example.com/#first 的按钮 它使用一个很好的 JavaScript 代码向下滚动(具有滑动效果)页面并减去标题的 184px，因此它会滚动到正确的位置。这是 .js 部分:

$(document).ready(function()
{
    // Scroll the whole document
  $.localScroll({
        offset:{left: 0, top:-184 }
    });


    });

当使用这个:www.example.com/#third(例如来自外部网站)时，这个 .js 函数不会运行，它会直接将我引导到 <section id="third"> 的中间。并且不减去 184px。

最好的解决方案是什么？

Answer 1

之所以会这样，是因为在重定向时，您的 js 函数甚至都没有被调用。您必须在重定向时显式调用它。我建议你使用图书馆 https://github.com/alvarotrigo/fullPage.js .它也带来了相同的滚动效果处理 anchor 。您只需编写正确的标记并使用此库。它会完成所有这一切。