вторник, 22 марта 2011 г.

Как добавить в wordpress кнопку «вверх» для быстрого скролинга к началу страницы.

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

Для того, чтоб добиться того, что описано выше нам нужно сделать всего лишь три шага…этим мы сейчас и займемся:

Шаг 1. Загрузка скрипта

Первым делом нам нужно загрузить сам плагин для скроллинга. Ссылку на него вы можете найти в конце этой статьи.
Скачанный плагин поместите в папку wp-contents/themes/yourthemes/
Также вам нужно подобрать изображение кнопки.

Шаг 2. Откройте и измените настройки плагина

Откройте файл scrolltopcontrol.js
1setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
2controlHTML: '<img src="up.png" style="width:48px; height:48px" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
3controlattrs: {offsetx:15, offsety:15}, //offset of control relative to right/ bottom of window corner
4anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
В приведенном листинге вы можете видеть доступные для изменения настройки. Также не забудьте изменить путь к изображению стрелки.

Шаг 3. Установка плагина

Откройте файл header.php в вашей теме. Код описанный ниже добавьте внутрь тега <head>:
1<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
2<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/scrolltopcontrol.js">
3/***********************************************
4* Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
5* This notice MUST stay intact for legal use
6* Visit Project Page at http://www.dynamicdrive.com for full source code
7***********************************************/
8</script>
Вот и все. Если вы сделали все правильно, то после обновления страницы вы увидите стрелку для плавного скроллинга в начало страницы.
DOWNLOAD PLUGIN
источник
Автор: на

Комментариев нет:

Отправить комментарий

Подписаться на: Комментарии к сообщению (Atom)