Jump to content
  • 0

Плавный переход по якорям + переход с внешних ссылок


wry
 Share

Question

Всем привет. Второй день пытаюсь решить следующую задачу: на главной странице сайта есть ссылка якорь, при клике на которую, страница плавно скролится к нужному блоку. Как сделать, чтобы ссылка на этот блок срабатывала с внешних страниц?

Подробнее.

Что имеем:

меню с одной ссылкой-якорем

<nav>
<ul class="menu">
<li><a href="#scroll">Главная</a></li>
<li><a href="link1.html">Внутренняя 1</a></li>
<li><a href="link2.html">Внутренняя 2</a></li>
</ul>
</nav>

вызывается через инклуд

<?php include('system/menu.php') ?>

Находясь на странице site.ru, при клике по "Главная" страница плавно скролится вниз  к блоку id="scroll" с помощью этого скрипта

    $(document).ready(function(){
       $('a[href*=#]').bind("click", function(e){
          var anchor = $(this);
          $('html, body').stop().animate({
             scrollTop: $(anchor.attr('href')).offset().top-100
          }, 1000);
          e.preventDefault();
       });
       return false;
    });

При попытке перейти с внутренней страницы сайта к нужному блоку на главной, ничего не происходит. Попробовал изменить ссылку на http://site.ru#scroll. теперь переход с внешних ссылок работает, но не работает скролл на главной. Как сделать, чтобы ссылка корректно срабатывала в обоих вариантах? Подозреваю нужно что-то исправить в коде js, но с этим языком я не знаком.

Заранее благодарю за помощь.

Edited by wry
Link to comment
Share on other sites

5 answers to this question

Recommended Posts

  • 0

1. Не пойму зачем вам return false; в $(document).ready
2. Добавьте перед ним проверку на window.location.hash, если он у вас есть, то ищем элемент и выполняем клик по нему $('a[href*='+hash+']').click()

Link to comment
Share on other sites

  • 0

Шёл третий день. Мои руки не стали прямее. Я перевтыкал этот код куда только можно, но результат не изменился.

Залил пример на тестовый домен http://www.vrhd.ru/

Если со страницы http://www.vrhd.ru/ кликнуть по ссылке "Главная", то все будет ок.

Если со страницы http://www.vrhd.ru/second.html кликнуть на "Главная", то будет аналогичная плавная прокрутка, а надо, чтобы открылась главная.

Тут оно в архиве http://www.vrhd.ru/test.rar, если есть желающие рискнуть доделать эту задачу, я с радостью отблагодарю.

Link to comment
Share on other sites

  • 0

Много нюансов с якорями:

1. В вашем примере на http://www.vrhd.ru/ кликнув по ссылке "Главная" плавно все переходит, но не отписывает якорь в адресную строку, а должен бы

2. На странице http://www.vrhd.ru/second.html кликнув по ссылке "Главная" мы попадаем на http://www.vrhd.ru/second.html#scroll , а должны наверно на http://www.vrhd.ru/#scroll 

чтобы было так нужно указывать в ссылках "/#scroll", но тогда $('a[href^='+hash+']:first').click() - нам не подойдет, придется брать window.location.pathname + window.location.hash

3. теперь если мы заходим на страницу с корректным hash, то браузер автоматически переносит нас к нужному элементу, я бы попробовал сделать якоря не похожими на hash тогда можно будет без лишних движений вниз/вверх сделать свою анимацию.

Ну или для простоты попробовать перед всем этим добавить window.scrollTo(0,0);

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By blackrusjew
      Добрый
      Имеем одностраничник с несколькими якорями вида https://www.site.ru/#awards
      Возможно ли через htaccess и 301редирект привести их к виду https://www.site.ru/#awards/
      Спасибо)
       
    • By lordenas
      Возникла проблема. На странице реализован обычный якорь типа
      <a name="top"></a> //// <a href="#top">NEXT</a> Но при вставке этой страницы, на другом сайте через iframe якоря перестают работать...
      Возможно ли как-то решить проблему?
    • By AndSan
      <h1 id="iak">Это моя первая страница</h1>
               <ul>
                   <li>
                       <a href="#iak">Привет мой друг!</a>
                   </li>
               </ul>
      Эти команды если их можно так назвать должны были перебрасывать на заголовок другого участка страницы, но сыллка не хочет работать хотя изображена как сыллка. Проверял в css id работает. Можете помочь?
    • By yura777
      Думаю, что вопрос и ответ имеет место быть, актуален и пригодиться не только мне. Вопрос к знающим людям, так как уровень пока не тот: подскажите пожалуйста как сделать автозапуск формы заказа для клиентов на лендинге через заданное время, либо перенаправление посетителя на определенное место?
      Пробовал посредством якоря и мета-тега сделать так:
      <meta http-equiv="refresh" content="5; URL=http://www.мойсайт.ru/#якорь"> но безуспешно. В адресной строке браузера после очередной перезагрузки прописывается путь к якорю, но ничего не происходит. Заранее спасибо откликнувшимся!
    • By Vasilisa
      Всем доброго дня. Проблема следующая:
      Есть пункт в меню (и соответственно раздел на сайте) - портфолио, которое имеет в себе подпункты "1" "2" "3" "4".
      На странице решил сделать сортировку. Т.е. можно отобразить все работы, либо работы одного из разделов. Поскольку каждый из этих разделов отображен в выпадающем меню, хотела бы узнать, как сделать переход на каждый из вариантов сортировки.
      Как выглядит сортитовка: http://tympanus.net/Tutorials/CSS3FilterFunctionality/index3.html
      В коде это сделано так:
      <section class="ff-container" style="padding-top: 200px;"> <input id="select-type-all" name="radio-set-1" type="radio" class="ff-selector-type-all" checked="checked" /> <label for="select-type-all" class="ff-label-type-all">All</label> <input id="select-type-1" name="radio-set-1" type="radio" class="ff-selector-type-1" /> <label for="select-type-1" class="ff-label-type-1">Web Design</label> <input id="select-type-2" name="radio-set-1" type="radio" class="ff-selector-type-2" /> <label for="select-type-2" class="ff-label-type-2">Illustration</label> <input id="select-type-3" name="radio-set-1" type="radio" class="ff-selector-type-3" /> <label for="select-type-3" class="ff-label-type-3">Icon Design</label> <div class="clr"></div> <ul class="ff-items"> <li class="ff-item-type-2"> <a href="http://dribbble.com/shots/366400-Chameleon"> <span>Chameleon</span> <img src="images/1.jpg" /> </a> </li> <li class="ff-item-type-1"> <a href="http://dribbble.com/shots/272575-Tutorials-wip-"> <span>Tutorials (wip)</span> <img src="images/2.jpg" /> </a> </li> <li class="ff-item-type-2"> <a href="http://dribbble.com/shots/372566-Flower"> <span>Flower</span> <img src="images/3.jpg" /> </a> </li> <li class="ff-item-type-1"> <a href="http://dribbble.com/shots/138484-Symplas-website"> <span>Symplas website</span> <img src="images/4.jpg" /> </a> </li> <li class="ff-item-type-3"> <a href="http://dribbble.com/shots/134868-TRON-Mobile-ver-"> <span>TRON: Mobile version</span> <img src="images/5.jpg" /> </a> </li> <li class="ff-item-type-2"> <a href="http://dribbble.com/shots/347197-Cake"> <span>Cake</span> <img src="images/6.jpg" /> </a> </li> <li class="ff-item-type-1"> <a href="http://dribbble.com/shots/186199-Tailoring-accessories"> <span>Tailoring accessories</span> <img src="images/7.jpg" /> </a> </li> <li class="ff-item-type-3"> <a href="http://dribbble.com/shots/133859-App-icon"> <span>App icon</span> <img src="images/8.jpg" /> </a> </li> <li class="ff-item-type-1"> <a href="http://dribbble.com/shots/188524-Event-Planning"> <span>Event Planning</span> <img src="images/9.jpg" /> </a> </li> </ul> </section>Пробовала сделать через якоря, ничего не получается, прошу, профы, помогите с задачей(
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy