JQuery прокрутите до именованного якоря при переходе с другой страницы

У меня есть подменю, которое развернуто на всех страницах моего сайта. Подменю содержит ссылки на именованные привязки на одной странице, на которую ссылается родительский элемент меню. Я успешно использую 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>
Источник

1 ответ

Ну, это определенно не поддержит загрузку анимации, если вы только применяете ее по клику.

Что касается поддержания фактического смещения для именованного якоря, то это должно быть сделано по умолчанию при загрузке. Если вы идете в someurl.com#someNamedLink на стандартной странице с прокруткой вы попадете на вершину этого именованного якоря по умолчанию, JS не требуется.

Теперь, не видя никакого кода, невозможно сказать, как вы это реализуете. Кадры, переполненные div? кто знает?

Пожалуйста, дайте ваш пример кода, чтобы мы могли определить, что происходит.

На первый взгляд это звучит так, как будто вы хотите поддерживать состояние своей страницы и загрузку. посмотрите на jquery.bbq для контроля состояния. Это позволяет вам легко перехватить загрузку с именем href (#someNamedLink) и выполнить анимацию на нужном якоре. Также дает вам дополнительное преимущество поддержки кнопки "Назад", чтобы вы могли анимировать повсюду (я лично считаю такой тип поведения раздражающим, но это ваша прерогатива)

Источник
Другие вопросы по тегам