Данный материал предоставлен сайтом ProWebber.cc исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
Скачать бесплатно Кнопка "Наверх".
Скачать бесплатно Кнопка "Наверх".
Сделал очередной велосипед - кнопка для прокрутки страницы сайта наверх.
Установка довольно таки проста, но надо как минимум уметь создавать/редактировать файлы и подключать JS файлы к шаблону.
CSS:
#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:
$(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; Это количество пикселей, начиная с которого появляется стрелка.
Так же в папку {THEME}/images/ вам нужно загрузить это или любое другое изображение стрелки и переименовать его в gotop.png
Пример работы вы можете видеть на моем сайте и тут на prowebber.
С уважением,
Олег Александрович a.k.a. Sander
Предыдущая Следующая