从其他页面导航时，jquery滚动到命名锚点答案

【问题标题】：jquery scroll to named anchor when navigating from other page从其他页面导航时，jquery滚动到命名锚点
【发布时间】：2010-06-22 14:12:29
【问题描述】：

我有一个在我网站的所有页面上展开的子菜单。子菜单包含指向父菜单项链接到的一页内的命名锚点的链接。我正在使用 jquery scrollTO 和 localScroll 成功地使用命名锚为页面内的滚动设置动画，但是如果我从站点内的不同页面导航到命名锚，它不会保留动画滚动或从顶部指定的偏移量。有没有办法做到这一点？

非常感谢任何反馈！塞西莉亚

下面是我正在使用的 html 示例。我在左侧有一个固定的菜单和一个固定的标题。现在，当您单击子菜单中的锚链接时，它会动画，并在距离窗口顶部 150 像素的活动命名锚处停止，这样它就不会消失在固定标题下方。

如果可能，我希望在从其他页面之一导航时让窗口滚动到命名锚点，但最重要的是我必须保留距离顶部 150 像素的偏移量。现在，当单击另一个页面的锚链接时，它从顶部停止 0px 并在标题下方消失。

<head>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-min.js"></script>
<script type="text/javascript" src="js/jquery.localscroll-min.js"></script>
<script type="text/javascript" > 
$.localScroll({offset:-150});
</script>
</head>

<body>
<div id="page">
    <div id="header-bg"><!-- fixed header -->
    <div id="header">
    <div id="logo"><a href="/" title="Home" rel="home"><img src="logo.jpg" alt="Home" id="logo-image" /></a></div>
    </div>
    </div> 
<div id="main">

<div id="sidebar-left"><!-- fixed menu -->
<ul class="menu">
<li class="expanded"><a href="/page1" title="Page 1" class="active">Page 1</a><!-- parent -->
        <ul class="menu"><!-- sub-menu linking to named anchors -->
        <li><a href="/page1#anchor1">Anchor-link 1</a></li>
        <li><a href="/page1#anchor2">Anchor-link 2</a></li>
        <li><a href="/page1#anchor3">Anchor-link 3</a></li>
        <li><a href="/page1#anchor4">Anchor-link 4</a></li>
        <li><a href="/page1#anchor5">Anchor-link 5</a></li>
    </ul>
</li>
<li><a href="/page2">Page 2</a></li>
<li><a href="/page3">Page 3</a></li>
<li><a href="/page4">Page 4</a></li>
</ul>  
</div> <!-- /#sidebar-left --> 

<div id="content">
<div class="chapter">
<a name="anchor1" id="anchor1"></a><!-- named-anchor -->
<h3>Sub-heading</h3>
<p>Lots of text</p>
</div>

<div class="chapter">
<a name="anchor2" id="anchor2"></a><!-- named-anchor -->
<h3>Sub-heading</h3>
<p>Lots of text</p>
</div>

<div class="chapter">
<a name="anchor3" id="anchor3"></a><!-- named-anchor -->
<h3>Sub-heading</h3>
<p>Lots of text</p>
</div>

<div class="chapter">
<a name="anchor4" id="anchor4"></a><!-- named-anchor -->
<h3>Sub-heading</h3>
<p>Lots of text</p>
</div>

<div class="chapter">
<a name="anchor5" id="anchor5"></a><!-- named-anchor -->
<h3>Sub-heading</h3>
<p>Lots of text</p>
</div>

</div> <!-- /#content --> 
</div> <!-- /#main --> 
</div> <!-- /#page --></body>

【问题讨论】：

能否请您发布您的代码。

标签： jquery scroll anchor scrollto

【解决方案1】：

如果你只在点击时应用它，它肯定不会保持动画加载。

至于维护命名锚点的实际偏移量，默认情况下它当然应该这样做。如果您在具有滚动功能的标准页面上转到someurl.com#someNamedLink，默认情况下它将带您到该命名锚点的顶部，无需 JS。

现在，如果没有看到任何代码，就不可能知道您是如何实现它的。框架，溢出的div？谁知道？

请提供您的示例代码，以便我们确定发生了什么。

乍一看，您似乎想在页面和 onload 中维护状态。查看jquery.bbq 进行状态控制。它允许您轻松捕获命名的 href (#someNamedLink) onload 并将动画执行到正确的锚点。还为您提供了后退按钮支持的额外好处，因此您可以在所有地方设置动画（我个人觉得这种行为很烦人，但这是您的特权）

【讨论】：

我实际上重新阅读了 jquery 插件的文档并意识到我跳过了一步。添加 $.localScroll.hash() 就可以了。感谢您的答复！我仍然会研究 jquery.bbq。