Opencart - Скрипт Плавной Прокрутки Без Якоря В Адресной Строке

Тема в разделе "Модули и дополнения", создана пользователем admin, 21 окт 2016.

  1. TopicStarter Overlay
    Offline

    admin Команда форума Администратор

    Сообщения:
    2.327
    Симпатии:
    77.276
    Репутация:
    170
    Всем привет. Когда-то давно я уже писал статью о том, как сделать плавную прокрутку к якорю. Скрипт отлично работает, но как известно, во многих подобных реализациях этого эффекта в адресной строке появляется сам якорь.

    Мне часто писали, что хотели бы видеть чистую адресную строку и в этой статье я просто выложу небольшой скрипт, который реализует плавную прокрутку без добавления якоря в адресную строку.
    2016-10-21_122308.png
    Скрипт плавной прокрутки
    Так как скрипт реализован с применением jQuery, то первым делом подключаем его. Я это делаю перед закрывающимся тегом </body>:

    Код:
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    Далее, давайте создадим меню. Ничего особенного, просто ненумерованный список со ссылками:

    Код:
    <ul class="nav nav-tabs nav-justified">
    <li><a href="#firstBlock">Первый якорь</a></li>
    <li><a href="#secondBlock">Второй якорь</a></li>
    <li><a href="#thirdBlock">Третий якорь</a></li>
    <li><a href="#fourthBlock">Четвертый якорь</a></li>
    </ul>
    Такие классы - потому что я использую bootstrap, но это никак не влияет на работу скрипта. Просто использую его, чтобы тратить меньше времени на написание стилей. В качестве параметра ссылки задаем id блоков, к которым будет происходить прокрутка. Для удобства я дал "говорящие" названия. То есть при клике на ссылку с параметром #fourthBlock, будет происходить прокрутка к блоку, у которого id="fourthBlock". Все - просто.

    Но подобным образом выглядит все и сотнях других реализациях плавной прокрутки. Давайте теперь добавим сам скрипт, ради чего все и затевалось. Помните, что добавляем его после подключения jQuery.

    Код:
    <script>
    $(document).ready(function(){
    $("a[href*=#]").on("click", function(e){
    var anchor = $(this);
    $('html, body').stop().animate({
    scrollTop: $(anchor.attr('href')).offset().top
    }, 777);
    e.preventDefault();
    return false;
    });
    });
    </script>
    Вот такое простое решение, которое поможет убрать лишние параметры в адресной строке на вашем landing page.
     

    Вложения:

    • scrolling.zip
      Размер файла:
      144,9 КБ
      Просмотров:
      8
    Последние данные очков репутации:
    shulp: 1 Очко 3 фев 2017
    kagan25, olympic1980, Argo и 4 другим нравится это.
  2. Offline

    Nick Пользователь

    Сообщения:
    11
    Симпатии:
    2
    Репутация:
    0
    Спасибо
     
  3. Offline

    max88888 Пользователь

    Сообщения:
    44
    Симпатии:
    8
    Репутация:
    0
    spasibo
     
  4. Offline

    Argo Пользователь

    Сообщения:
    46
    Симпатии:
    9
    Репутация:
    0
    спасибо
     
    dima.erahtin нравится это.
  5. Offline

    kagan25 Пользователь

    Сообщения:
    15
    Симпатии:
    1
    Репутация:
    0
    Спасибо
     
    dima.erahtin нравится это.