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