сделать кнопку плавного прокручивания

В этой статье я расскажу, как сделать кнопку плавного прокручивания «Наверх» на сайте WordPress при помощи фреймворка jQuery. Прокручивание «Наверх» плавное. Кнопка «Наверх» исчезает вверху страницы. Скорость прокрутки «Наверх» можно менять.

Кнопка «Наверх» очень удобное дополнение к сайту WordPress. Особенно актуальна для сайтов с большим количеством комментариев и длинными статьями.

Я уже рассказывал в статье (читать ТУТ), как сделать кнопку «Наверх» при помощи появляющейся и исчезающей картинки. Кнопка «Наверх» реализовывалась при помощи скрипта и файла .js. После реализации картинка кнопки «Наверх» появляется и исчезает при начале просмотра статьи.  Но в скрипте не было явно прописано скорости прокрутки наверх.

В предлагаемом ниже варианте, можно сделать кнопку плавного прокручивания «Наверх» с меняющейся скоростью прокрутки, без существенных изменений в скрипте. Меняя, увеличивая, скорость прокрутки, а вернее изменяя время в миллисекундах, требуемое на полное выполнение скрипта, можно добиться настолько плавной прокрутки «Наверх», которая вам нужна.

Создаем кнопку плавного прокручивания «Наверх»

Сделать файл .js

Прежде всего, создайте файл в формате [.js] с произвольным именем, латинскими буквами. Для этого воспользуйтесь любым текстовым редактором (типа Notepad++). В редактор вставьте ниже следующее содержание и сохраните его под любым именем в формате [.js].

<span style="font-size: 1em; line-height: 1.6em;">(function($){</span>
/* Применение для кода :
 ------------------------------------------------- */
 $(function(){
 var e = $(".scrollTop");
 var speed = 1000;
e.click(function(){
 $("html:not(:animated)" +( !$.browser.opera ? ",body:not(:animated)" : "")).animate({ scrollTop: 0}, 1000 );
 return false;
 });
 //появление
 function show_scrollTop(){
 ( $(window).scrollTop()&amp;gt;300 ) ? e.fadeIn(600) : e.hide();
 }
 $(window).scroll( function(){show_scrollTop()} ); show_scrollTop();
 });
})(jQuery)

Скорость прокрутки (var speed = 1000) можно поменять на любое значение, нужное вам.

Читайте так же:  Как поменять префикс базы данных Wordpress

Закачайте файл в каталог сайта

Закачайте созданный файл ,через FTP клиент, в каталог своего сайта в папку wp-include/js. Запишите путь до размещенного файла, это понадобиться в дальнейшем.

Пропишем стили CSS для картинки «Наверх»

Откройте файл сайта style.css своего сайта. Сделать это можно из административной панели сайта или в любом FTP клиенте. Пропишите в файл style.css ниже следующие строки.

<span style="font-size: 1em; line-height: 1.6em;">.scrollTop{</span>
 background:url(путь_до_картинки/Картинка-спрайт.png) 0 0 no-repeat;
 display:block; width:50px; height:50px; /* Размер картинки */
 position:fixed; bottom:10px; left:47%;
 z-index:2000;
 }
 .scrollTop:hover{ background-position:0 -58px; } /* сдвигаем фон вверх */

Пояснения к коду: Этот код, не что иное, как спрайт-css. Он прописывает стиль для спрайт картинки, то есть двух картинок объединенных в одном файле. Одно картинка будет показывать не активную картинку-ссылку, вторая картинка будет показываться при наведении и нажатии на картинку.

Размер картинки в примере 50px можно поменять для своей картинки. Картинка спрайт предварительно загружается в медиа библиотеку сайта. Путь до картинки копируете и запоминаете. Пример спрайт-картинки:

Спрайт картинка

Вставляем код кнопки (HTML) в шаблон

Открываем файл footer.php своего шаблона. В конец файла, перед закрывающим тегом </body> вставляем следующий код:

<a class='scrollTop' href='#header' style='display:none;'></a>

Этот код включает саму кнопку.

Осталось последнее, включить скрипт для кнопки

Для этого в шаблон сайта в файл footer.php вставляем такой код:

<script src="http://Ваш-сайт/wp-includes/js/Файл.js"></script>

 В коде меняем путь до скрипта на свой путь, записанный в пункте 1.

Специально для www.Wordpress-abc.ru 

Читайте другие статьи по теме кнопка «Наверх» на сайте WordPress

Другие статьи раздела » WordPress без плагинов»


Как сделать кнопку плавного прокручивания «Наверх»

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