регистрация
856материалов
3291комментарий
235тем на форуме
6866пользователей

Кнопка вверх для сайта


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

Приступим к установке:

Для начала в нижнюю часть сайта вставим этот JS код

Код
Код
// кнопка вверх  
$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});  
$(function() {  
$(".top_up").scrollToTop();  
});

Теперь пропишем стили CSS

Код
Код
/* стили кнопки вверх -----*/  
.top_up { color:#F2F2F2; text-shadow:0 1px 1px #101010; cursor: pointer; position:fixed; bottom:-3px; right:50px; background:#7B7B7B; margin: 0px; padding:5px 10px 7px 10px; border:1px solid #525252; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px }  
.top_up:hover{ color:#F2F2F2; background:#868686 }

И на последок установим HTML код сразу после тега

Код
Код
<a href="#" class="top_up">Вверх ▲</a>

Демо прикреплять нет никакого смысла, так как на нашем сайте (uc-portaller.ru) установлена именно такая кнопка. На этом все! Оставляйте комментарии и не забывайте следить за обновлениями.


Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 28.08.2013 в 11:58
Материал просмотрен: 899 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 0 комментариев

Пожаловаться
Сказать спасибо
Источник

0 комментариев


avatar
Хотите сайт всего за 10 дней?
Создать сайт вместе с uKit.com
Статистики нашего сайта
Правила чата
Пользователи онлайн
Закрыть мини-чат
+Открыть мини-чат
0
Онлайн всего: 2
Гостей: 2
Пользователей: 0