Разработка сайтов

Верстка, адаптивная верстка, программирование, разработка на WordPress

Плавная прокрутка к якорю на сайте WordPress

Привет. Недавно делал одностраничный сайт на котором нужно было сделать плавную прокрутку к блоку, то есть в меню сайта выбираем пункт и попадаем в нужное место с плавным прокручиванием страницы. Делается это с помощью стандартного якоря в html, но чтоб работала плавная прокрутка нужен jquery скрипт. Все это дело стоит на WordPress. Нашел скрипт который делает плавную прокрутку. Вот такой код:

Еще нужно подключить jquery библиотеку:

Вставляем скрипт между тегами <head></head>. Также я создал меню и вывожу его с помощью функции wp_nav_menu();, в нем нужно прописать название дива к которому будет прокрутка.

Untitled-1

У меня есть блок с фотками и называется он <div id = «photo_galery»></div>. И в меню нужно создать ссылку с таким же названием дива, то есть #photo_galery. Вот и все. Пример работы можно посмотреть здесь. Так все работает на WordPress. По этой ссылке я создал файл который показывает работу  прокрутки в документе html. Ниже предоставлю код html.

На этом все. Подписывайтесь на мой сайт, заходите в группу Вконтакте.

  • Руслан Вязников

    Спасибо за помощь. очень помогло, на wordpress — пошло как по маслу, без всяких заморочек))

    • webastudio

      Пожалуйста! Рад что пригодилось)

  • Robert Garibashvili

    У меня сайт с горизонтальной прокруткой . Я вставил скрипт. Но прокрутка не стала плавной : liberty.besaba.com ... что я сделал не так ?

    • webastudio

      Попробуйте в скрипте

      $('html, body').stop ().animate ({

      'scrollTop': $target.offset ().top

      }, 600, 'swing', function () {

      window.location.hash = target;

      });

      scrollTop заменить на scrollLeft

      В Вашем случае будет скролинг справа налево.

  • Robert Garibashvili

    Совсем ничего не получается, я уже и то что вы посоветовали вставил:

    $(document).ready (function (){

    $('html, body').stop ().animate ({

    'scrollLeft': $target.offset ().left

    }, 600, 'swing', function () {

    window.location.hash = target;

    });

    });

    Я даже создал текстовый документ, вставил код туда и сохранил его с разрешением .js, залил и всё равно не работает ...

    Можно поинтересоваться : если я вам заплачу, вы можете сделать плавный скролл ?

    • webastudio

      info@webastudio.com пишите

  • Ostap Ponomarenko

    Просто пол ночи пытался найти решение реализации этого функционала, плагин не помог, уже был в отчаянии и тут наткнулся на ваш сайт! Просто огромное человеческое СПАСИБО ВАМ!!!!!! Работает

    • webastudio

      Пожалуйста 🙂

  • светлана ильина

    А сам шаблон под «Регату» как подбирали, или любой шаблон брать, делать закрепленное меню и дивы для скрола по тематике?

  • Ирина

    Большое человеческое спасибо. долго билась. не получалось. случайно нашла Ваше решение- все заработало

  • Alex Morozov

    Если у вас не заработало, то возможно поможет заменить $(document).ready (function () на jQuery (function ($)

    По крайней мере у меня все заработало так, автору большой спасибо

  • Aleksandr Osadchyy

    И правда работает!

    Спасибо!