828материалов
231тема на форуме
3032комментария
6247пользователей

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


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

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

Для начала в нижнюю часть сайта вставим этот 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
Материал просмотрен: 758 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 0 комментариев

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

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


avatar
uLike – кнопка «Мне нравится»
Вход через социальные сети
Эрудит системы uCoz-uВопросы
Статистики нашего сайта