Плавный скроллинг при загрузке страницы

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

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

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

Для осуществления данного эффекта — скруллинг сайта при загрузке — нам понадобиться следующий 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 — Медиафайлы — добавить новый).

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

 

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

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

<script type="text/javascript" src="http://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>

Все готово!

 

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

Плавный скроллинг при загрузке страницы: 4 комментария

  1. Юрий

    Здравствуйте, Константин!
    В п.2 подключение javascript — не указан код, который надо вставить в файл functions.php

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>