Кнопка наверх для сайта. Плагин scroll to top

Собственно код не мой. Умельцы вытащили его из проекта яндекс поиск на сайт, а остальные подхватили и размножили описание на своих сайтах! Итак по порядку:

1. Добавляем код ниже между <head> </head>

<script type="text/javascript">$(document).ready(function(){
$(window).scroll(function () {if ($(this).scrollTop() > 0) {$('#scroller').fadeIn();} else {$('#scroller').fadeOut();}});
$('#scroller').click(function () {$('body,html').animate({scrollTop: 0}, 400); return false;});
});</script>

Здесь есть такие переменные:

#scroller - название кода! Используется для вставки JQ элементов в HTML
{if ($(this).scrollTop() > 0) - Число, т.е. нуль - величина скрула вниз, после которой появляется кнопка вверх.
animate({scrollTop: 0}, 400); - 400 - скоростть подъема вверх

2. Добавляем код перед закрывающим тегом </body>

<div id="scroller" class="b-top" style="display: none;"><span class="b-top-but">наверх</span></div>

3. В CSS стили добавляем следующий код:

.b-top {z-index:2600;position:fixed;left:0;bottom:90px;width:34%;margin-left:50%;opacity: 0.5;filter:alpha(opacity=50);}
.b-top:hover {opacity:1;filter:alpha(opacity=100);cursor:pointer;}
.b-top-but {z-index:2600;position:absolute;display:block;left:56px;bottom:0;margin:0 0 0 100%;padding:32px 12px 4px; color:white;background:#D8D5C2 url(http://site.yandex.ru/static/css/blocks/b-j-top/b-j-top.png/b-j-top.png) no-repeat 50% 11px;border-radius:7px;}

4. Вытягиваем картинку

Картинку накодится по адресу: http://site.yandex.ru/static/css/blocks/b-j-top/b-j-top.png! Увидеть ее там довольно проблематично. Я через оперу в разделе проинспектировать элемент, который обводит всю графику на странице скопировал ее себе! Да бы не мучаться, можете взять ее ниже:

Внимание! Для работы на сайте должна быть подключена JQ библиотека!

Actionteaser.ru - тизерная реклама

« Новый альбом Juno Reactor - T...

GPU-Z - мини програмка для мон... »

Понравилась статья "Кнопка наверх для сайта. Плагин scroll to top" из раздела Веб разработка » JavaScript? Подпишись на RSS. Будь в курсе всего происходящего на сайте

Комментариев: 0 • Просмотров: 7814 Дата: 24-апр-2013, 17:10 Автор: devarts