Блог

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

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

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

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

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

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

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

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

    • webastudio

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

  • Robert Garibashvili

    У меня сайт с горизонтальной прокруткой . Я вставил скрипт. Но прокрутка не стала плавной : http://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 , залил и всё равно не работает …

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

  • Ostap Ponomarenko

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

    • webastudio

      Пожалуйста 🙂

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

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

  • Ирина

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

  • Alex Morozov

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

  • Aleksandr Osadchyy

    И правда работает!
    Спасибо!

Спасибо, сообщение отправлено.