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

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

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

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;
        });
    });

Настройка скрипта

  • #scroller — название HTML контейнера для обертки копки;
  • scrollTop() > 0 — величина скролла вниз, после которой появляется кнопка вверх;
  • animate({scrollTop: 0}, 400); — скорость подъема вверх;

HTML разметка

Перед закрывающим тегом BODY добавить следующий код:

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

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;
}

Похожие записи


JS — скрыть внешние ссылки на сайте
Очень простой скрипт для скрытия внешних ссылок на любом сайте. Разрабатывался для CMS WordPress, но будет работать абсолютно везде. Полностью...
jQuery — таймер обратного отсчета с изменяемой скоростью
Рассмотрим наглядный пример управления таймером на jQuery. Задача: Таймер запускается при загрузке страницы. При клике на кнопку с числом скорость...
jQuery Cookies — ограничиваем повтор события с помощью куков
Cookies — возможность сохранить в браузере некие данные, которые не удалятся после обновления страницы. Задача: отследить с помощью javaScript фиксированное...
jQuery — очищаем поле с результатом после каждого выполненного события
Уже после написаний данной статьи случайно наткнулся на реальный пример описанного здесь простейшего косяка в jQuery коде. Это известный онлайн...
jQuery — простое модальное окно
В данной статье расскажу про очень простое решение с модальным окном на jQuery. Прикручивал его поверх платного конструктора шаблонов сайта...

Добавить комментарий