Вы просматриваете: » » стрелка вверх на сайте
Категория: Информация, опубликовал: rob96, добавлено: 29-08-2014, 13:35
 

Чтобы сделать стрелку нужно выполнить несколько действий:

первое
подключить библиотеку 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)    Просмотров: 1568   

Другие новости по теме:

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

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

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

Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Вставка ссылкиВставка защищенной ссылки Картинка Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Введите два слова, показанных на изображении:


управление аккаунтом
Профиль пользователя
, вы вошли как гость


Если вы на сайте впервые, то вы можете зарегистрироваться!

Вы забыли пароль?
самые интересные новости
Популярные новости
Материалы данного ресурса принадлежат пользователям и предназначены для расширения кругозора всех желающих
Unix Windows Техника Железо Mobile For Games Сплетни Net
  • Шпаргалки