从其他页面导航时，jquery滚动到命名锚点
我有一个在我网站的所有页面上展开的子菜单。子菜单包含指向父菜单项链接到的一个页面内的命名锚点的链接。我正在成功地使用jquery、scrollTO和localScroll在带有命名锚点的页面中设置滚动动画，但是如果我从站点内的不同页面导航到命名锚点，它不会保留动画滚动或指定的顶部偏移量。有没有办法做到这一点？
我非常感谢大家的反馈！塞西莉亚
下面是我正在使用的html的一个示例。我在左边有一个固定的菜单和一个固定的标题。现在，当您单击子菜单中的锚点链接时，此动画将停止，并从窗口顶部起停止活动的命名锚点150px，这样它就不会消失在固定标题下。
如果可能，我希望当从其他页面导航时，窗口滚动到命名锚点，但最重要的是，我必须保留从顶部偏移150px。现在，当点击另一个页面的锚点链接时，它会从顶部停止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>回答 1
Stack Overflow用户
发布于 2010-06-22 22:23:04
如果你只在onclick上应用它，它肯定不会保持动画的onload。
至于维护命名锚点的实际偏移量，它在默认情况下肯定会在加载时执行此操作。如果你在一个有滚动功能的标准页面上访问someurl.com#someNamedLink，默认情况下，它会把你带到那个命名锚点的顶部，不需要JS。
现在，如果看不到任何代码，就不可能知道你是如何实现这一点的。帧，溢出的div？谁知道呢？
请给出您的示例代码，以便我们可以确定发生了什么。
乍一看，这听起来像是您想要在页面和加载中保持状态。看看用于状态控制的jquery.bbq。它允许您轻松地在加载时捕获命名href (#someNamedLink)，并在正确的锚点上执行动画。还为你提供了后退按钮支持的额外好处，这样你就可以到处做动画了(我个人觉得这种行为很烦人，但那是你的特权)
https://stackoverflow.com/questions/3093945
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号