У меня есть подменю, которое развернуто на всех страницах моего сайта. Подменю содержит ссылки на именованные якоря в пределах одной страницы, на которую ссылается родительский пункт меню. Я успешно использую jquery scrollTO и localScroll для анимации прокрутки на странице с именованными привязками, но если я перехожу к именованной привязке с другой страницы на сайте, он не сохраняет анимированную прокрутку или указанное смещение сверху. Есть ли способ сделать это?
Я очень ценю любую обратную связь!! Сесилия
Ниже приведен пример html, с которым я работаю. У меня фиксированное меню слева и фиксированный заголовок. Прямо сейчас это анимируется, когда вы нажимаете на ссылки привязки в подменю, и останавливается с активной именованной привязкой в 150 пикселях от верхней части окна, чтобы она не исчезала под фиксированным заголовком.
Если возможно, я бы хотел, чтобы окно прокручивалось до именованного привязки при переходе с одной из других страниц, но, что наиболее важно, я должен сохранить смещение 150 пикселей сверху. Прямо сейчас он останавливается на 0 пикселей сверху и исчезает под заголовком при нажатии на якорную ссылку с другой страницы.
<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>
