Здравствуйте, сегодня хочу с вами поделиться, как сделать красивый эффект для вашего сайта, а именно: плавная прокрутка при загрузке страницы до нужного места на сайте.

Скачать исходники для статьи можно ниже

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

Для осуществления данного эффекта – скруллинг сайта при загрузке – нам понадобиться следующий javascript:

$(function(){
  $('html, body').animate({
    scrollTop: $('#example').offset().top
  }, 2000);
});

, где:

2000 – это скорость прокрутки сайта, если хотите замедлить прокрутку сайта, то нужно увеличить данную цифру, например до 4000, а если ускорить скроллинг – то уменьшить цифру.

example – это название блока, до которого должен происходить скроллинг, то есть на сайте  еще должен быть блок с id=example, например так:

<div id='example'>
Текст блока или можете оставить данный блок без текста - будет вроде якоря
</div>

Чтобы создать файл javascript можете воспользоваться Notepad++ (бесплатный редактор кода) – для этого нужно просто сохранить файл в формате .js

Или скачать данный скрипт с моего сайта – скачать scrool.js.

А теперь давайте заставим работать данный эффект – плавный скроллинг при загрузке сайта – на wordpress:

1. Закачиваем javascript (scrool.js) на свой сайт – можно по ftp (например бесплатная программа – filezilla) или же с помощью стандартного загрузчика wordpress (панель управления wordpress – Медиафайлы – добавить новый).

Запоминаем путь до файла, в данном примере он будет – “https://mnogoblog.ru/wp-content/uploads/2013/10/scrool.js”.

2. Подключаем данный javascript в wordpress

Для этого в файле header.php можно вставить до тега </head> следующие строчки кода:

<script type="text/javascript" src="https://mnogoblog.ru/wp-content/uploads/2013/10/scrool.js"></script>

Однако вышеуказанный способ  в wordpress является конфликтным…, поэтому лучше воспользоваться следующим способом подключения скриптов  – для этого открываем файл functions.php (в левом меню панели управления wordpress выбираем пункт “Внешний вид” и его подпункт “Редактор”, справа в списке шаблонов выбираем файл functions.php), переходив в конец кода данного файла и вставляем следующие строчки:

…

3. Вставляем блок “example” в нужный шаблон – можно воспользоваться индивидуальным шаблоном.

Например, вставим данный блок в шаблон single.php (отвечает за вывод записей, постов на сайте wordpress) – для этого заходим в панель управления, в левом меню выбираем пункт “Внешний вид” и его подпункт “Редактор”, справа в списке шаблонов выбираем файл – single.php.

И вставляем следующий код, например, перед выводом комментариев (можете вставить в любое другое место), то есть до строчки “php comments_template()”:

<div id='example'>
</div>

Все готово!