jquery scroll to named anchor when navigating from other page
I have a submenu that is expanded on all pages of my site. The submenu contains links to named-anchors within o开发者_高级运维ne 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>
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#someNamedLink on 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)
加载中,请稍侯......
精彩评论