Кнопка наверх для сайта. Плагин 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;
}

Читайте также

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

Mobile-friendly — немного об адаптивной верстке
В эпоху mobile-friendly сайтов адаптивная верстка для сайта стала обыденностью и по умолчанию включается в базовый ценник (или же делают...
JS — делаем плавающий блок для рекламы
Заходим на сайт, скролим вниз, пока не закончатся все блоки в сайдбаре, но вот незадача — один из блоков прилип...
jQuery — изменяем вложенный блок (чилд) при наведении на родительский
На июнь 2017 года средствами CSS невозможно изменить вложенный блок (если он не является прямым наследником родительского), при наведении на...
JS — создаем эффект мигания. Мигающие баннеры в HTML
В данной статье научимся создавать эффект мигания на javascript и jQuery (исчезание и появление) и задавать ему временной интервал. Для...
JS — автоматизация сокрытия всех внешних ссылок на странице
Задача: автоматически находить все ссылки на сайте при этом исключая внутренние и те, у которых имеется метка. Ко всем остальным добавлять...

Комментарии

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *