Чтобы сделать стрелку нужно выполнить несколько действий:
первое
подключить библиотеку JQuery к странице сайта, это нужно чтобы прокрутка была плавной, а не как просто ссылка вверх страницы.
открываем файл main.tpl
перед закрытием Head вставляем пару строк:
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js">
не забываем открывать и закрывать тег скрипт
второе
внизу страницы main.tpl делаем ссылку на стили, определяющие ее внешний вид:
- в моем случае toTop2 это название, которое система будет искать в css стилях.
здесь же, ниже, вставляем php код согласно которому прокрутка будет плавной:
$(document).ready(function() {
$("#toTop2").click(function() {
$("body,html").animate({
scrollTop: 0
}, 500); #значение 500 указывает время за которое страница перемотается вверх
});
});
if ($(window).scrollTop() > 100) { #значение 100 указывает насколько пикселей нужно прокрутить страницу чтобы стрелка появилась
$("#toTop2").fadeIn();
} else {
$("#toTop2").fadeOut();
}
$(window).scroll(function() {
if ($(window).scrollTop() > 100) { #значение 100 указывает сколько пикселей должно остаться до верха страницы, когда стрелка исчезнет
$("#toTop2").fadeIn();
} else {
$("#toTop2").fadeOut();
}
});
на этом работа с main.tpl закончена.
третье
идем в css, я например положил описание стрелки в style/engine.css.
в самом низу страницы добавляем:
#toTop2
{
position:fixed; #положение на странице
z-index:9999;
bottom:10px; #отступ от нижнего края страницы
left:0px; #отступ от левого края страницы
background:url('/адрес картинки стрелки.png') no-repeat;
width: 122px;
height: 350px; #высота кнопки
border: none;
padding: 5px;
cursor: pointer; #вид курсора при наведении на кнопку
color: transparent;
text-decoration: none;
}
взять код
на этом все
|
Комментариев оставлено: (0) Просмотров: 2250
Другие новости по теме:
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам
зарегистрироваться либо войти на сайт под своим именем.
Комментарии к новости: