Главная » Для web-мастера » Скрипты

Кнопка "Наверх"


Красивая кнопка для прокрутки страницы сайта наверх.


Установка довольно таки проста, но надо как минимум уметь создавать/редактировать файлы и подключать JS файлы к шаблону.

CSS:
Code
#gotop{position:fixed;width:41px;height:41px;right:7px;bottom:20px;display:block;background:url('../images/gotop.png') no-repeat;z-index:9998;display:none;}


JS:
Code
$(function(){var scroll_start=30;var top=0;$('body').append('<a href="#" id="gotop" title="Наверх"></a>');var s=$('#gotop');var margin_top=parseInt(s.css('top'));function gotop_scroll(){top=$(window).scrollTop();if(top<scroll_start)s.fadeOut(400);else s.css('opacity',0.5).fadeIn(300)}$(window).scroll(gotop_scroll);s.live({mouseenter:function(){if(top>scroll_start)$(this).fadeTo(200,1.0)},mouseleave:function(){if(top>scroll_start)$(this).fadeTo(400,0.5)},click:function(){$('html,body').animate({scrollTop:0},'slow');return false}})})


Обратите внимание на scroll_start=30; Это количество пикселей, начиная с которого появляется стрелка.

Так же в папку /images/ вам нужно загрузить это или любое другое изображение стрелки и переименовать его в gotop.png


Источник |  Автор: Sander | Категория: Скрипты | Добавил: AID | Дата: 15.07.2012
Посмотреть демо Кнопка "Наверх"
Кнопка "Наверх"(посмотрели: 1824)

Другие новости

Поделиться ссылкой

Ссылка:
BB-code:
HTML:
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Хостинг от uCoz