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

Веб разработка » HTML, CSS, JS

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

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