Кнопка «Наверх» на вашей WordPress странице
Наверняка перемещаясь по страницам интернета вы сталкивались с кнопкой «наверх», которая при нажатии перемещает посетителя снизу страницы на самый верх.
В этой статье будет описано как встроить такую функциональность, если она отсутствует, но требуется. Рассмотрим эту задачу на примере страницы tiki.lv.
Кнопка «наверх» по сути проста — это всего лишь <a> типа линк.
Поэтому добавить этот линк очень просто, поместив следующий код:
[code language=»php»]
…
…
[/code]
Эту строку помещаем в нужное нам место скрипта footer.php и по большому счету кнопка «наверх» у нас уже будет работать. Чтобы этот линк выглядел как кнопка его надо дополнительно стилизовать, поэтому добавляем следущие строки в файл .css стилей:
[code language=»css»]
#footer a.anchor {
position: absolute;
right: 15px;
top: -2px;
width: 20px;
height: 20px;
background: url(‘http://www.tiki.lv/wp-content/uploads/footer_anchor.png’) 0 0 no-repeat;
display: block;
text-decoration: none;
}
[/code]
Выполнив ранее описанные шаги кнопка будет готова, но она будет переносить посетителей сайта на верх сайта моментально, а хотелось бы придать эффект плавного скольжения наверх.
Чтобы достичь этого эффекта будем использовать javascript:
[code language=»javascript»]
var timeOut;
function scrollToTop() {
if (document.body.scrollTop!=0 || document.documentElement.scrollTop!=0){
window.scrollBy(0,-40);
timeOut=setTimeout(‘scrollToTop()’,20);
}
else clearTimeout(timeOut);
}
[/code]
Данный скрипт сохраним в дочерней теме к примеру в папке «js» с названием «top.js». Когда это будет выполнено, можно инициализировать этот скрипт добавив строки в functions.php файл:
[code language=»php»]
if(!function_exists(«mate_scripts»)) {
function mate_scripts() {
if( is_admin() )
return;
$template_url = get_template_directory_uri(); // if theme is used
$child_theme_url = get_stylesheet_directory_uri(); // if child theme is used
wp_register_script( ‘1.7.1’, $script_directory. ‘/js/jquery-1.7.1.js’, ‘jquery’);
wp_register_script( ‘top’, $script_directory. ‘/js/top.js’, ‘jquery’);
wp_enqueue_script(‘1.7.1’);
wp_enqueue_script(‘top’);
} }
add_action(‘init’, ‘mate_scripts’);
[/code]
Для работы скрипта требуется библиотека jquery, поэтому инициализирум также и ее.
Когда эти шаги будут выполнены, то надо заменит скрипт нашего <a> линка на этот:
[code language=»php»]
…
…
[/code]
При нажатии нашего линка мы выполняем функцию «scrollToTop», описанную в нашем top.js скрипте.
Если необходимо ускорить или замедлить скорость перемотки наверх поиграйте с парасетром timeOut в скрипте top.js.
Ответить
Хотите присоединиться к обсуждению?Не стесняйтесь вносить свой вклад!