从其他页面导航时jquery滚动到命名锚点
我有一个在我网站的所有页面上展开的子菜单。子菜单包含指向父菜单项链接到的一页内的命名锚点的链接。我正在使用 jquery scrollTO 和 localScroll 成功地使用命名锚点在页面内设置滚动动画，但如果我从站点内的不同页面导航到命名锚点，它不会保留动画滚动或距顶部的指定偏移量。有办法做到这一点吗？
我非常感谢任何反馈！ Cecilia
下面是我正在使用的 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>
I have a submenu that is expanded on all pages of my site. The submenu contains links to named-anchors within one page which the parent menu item links to. I am using jquery scrollTO and localScroll successfully to animate scrolling within the page with the named-anchors but if I navigate to a named-anchor from a different page within the site it does not retain the animated scroll or specified offset from the top. Is there a way to do this?
I greatly appreciate any feedback!!
Cecilia
Below is an example of the html I’m working with. I have a fixed menu on the left side and a fixed header. Right now this animates when you click on the anchor links in the submenu and stops with the active named anchor 150px from the top of the window so that it does not disappear underneath the fixed header.
If possible, I'd like to have the window scroll to the named-anchor when navigating from one of the other pages but most importantly I have to retain the offset 150px from the top. Right now it stops 0px from the top and disappears underneath the header when clicking on an anchor link from another page.
<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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
好吧，如果您只在单击时应用它，它肯定不会维持动画加载。
至于维护到指定锚点的实际偏移量，它当然应该在默认加载时执行此操作。如果您在具有滚动功能的标准页面上访问
someurl.com#someNamedLink，默认情况下它将带您到达该命名锚点的顶部，无需 JS。现在，如果看不到任何代码，就不可能知道你是如何实现的。框架、溢出的 div？谁知道？
请提供您的示例代码，以便我们确定发生了什么。
乍一看，听起来您想在页面和加载中维护状态。查看 jquery.bbq 进行状态控制。它允许您轻松捕获命名的 href (#someNamedLink) onload 并在正确的锚点上执行动画。还为您提供了后退按钮支持的额外好处，这样您就可以在任何地方制作动画（我个人认为这种行为很烦人，但这是您的特权）
well it definitely won't maintain the animation onload if you're only applying it onclick.
As for maintaining the actual offset to the named anchor, it should certainly be doing this by default onload. If you go to
someurl.com#someNamedLinkon a standard page that has scrolling, it will take you to the top of that named anchor by default, no JS required.Now, without seeing any code it's impossible to tell how you're implementing this. Frames, overflowed divs? who knows?
Please give your sample code so we can determine what's going on.
At first glance, it sounds like you want to maintain state within your page and onload. look at jquery.bbq for state control. It allow you to easily capture that named href (#someNamedLink) onload and perform your animation to the right anchor. Also gives you the added benefit of back button support so you could animate all over the place (I personally find that type of behaviour annoying but that's your prerogative)