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

Кнопка наверх для сайта. Плагин 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! Увидеть ее там довольно проблематично. Я через оперу в разделе проинспектировать элемент, который обводит всю графику на странице скопировал ее себе! Да бы не мучаться, можете взять ее ниже:

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



Внимание! Для работы на сайте должна быть подключена JQ библиотека!
Понравилась статья "Кнопка наверх для сайта. Плагин scroll to top" из раздела Создание сайта » Работа с кодом? Подпишись на RSS. Будь в курсе всего происходящего на сайте
Комментариев: 0 •  Просмотров: 6209   Дата: 24-апр-2013, 17:10

Похожие статьи

Комментарии

b
i
u
s
|
left
center
right
|
emo
color
|
hide
quote
translit
© 2010-2015 artemmian.ru v 7.0: flexyflat tpl Designed by artstudios
Карта сайта HTMLКарта сайта XMLПравообладателям
Яндекс.Метрика