Кнопка «наверх» для сайта как в ВКонтакте

Кнопка наверх для сайта как в ВКонтактеНебольшая статья о том, как можно быстро сделать кнопку «наверх» для своего сайта. Кнопка будет выглядеть почти как ВКонтакте.
Тут все просто, для разработки нам потребуется библиотека jquery. Начнем. Сначала напишем css стили для кнопки:

<style>
.in_top{
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100px;
    height: 100%;
    opacity: 0.5;
    filter: alpha(opacity=50);
    cursor: pointer;
    display: none;
}
.in_top:hover{
    background-color: #E1E7ED;
    opacity: 1;
    filter: alpha(opacity=100);
}
.in_top span{
    display: block;
    width: 100px;
    margin-top: 10px;
    text-align: center;
    color: #45688E;
    font-weight: bold;
}
</style>

Теперь напишем js код, для работы кнопки:

$(document).ready(function(){
    // при клике скроллим страницу вверх
    $('.in_top').click(function(){
        $("body,html").animate({"scrollTop":0}, 300);
    });

    // делаем проверку при скролле
    $(window).scroll(function(event){
        var countScroll = $(window).scrollTop();
        // если прокрутили больше 100 пикселей показываем кнопку "вверх"
        // иначе прячем
        if (countScroll>100){
            $('.in_top').show();
        }else{
            $('.in_top').hide();
        }
    });
});

Теперь остается только добавить html на страницу:

<div class="in_top">
    <span>↑ Наверх ↑</span>
</div>

Вот и все, кнопка готова. Пример работы можете посмотреть на этом блоге :)

Рассказать друзьям:


Кнопка «наверх» для сайта как в ВКонтакте: 7 комментариев

    1. Код js вставляется внутрь тегов script. И распологается внутри тегов head, хотя это не критично — можно расположить в любом месте страницы.

  1. Это вставил между тегами head

    ↑ Наверх ↑

    Это содержимое файла js в корне сайта
    $(document).ready(function(){
    // при клике скроллим страницу вверх
    $(‘.in_top’).click(function(){
    $(«body,html»).animate({«scrollTop»:0}, 300);
    });

    // делаем проверку при скролле
    $(window).scroll(function(event){
    var countScroll = $(window).scrollTop();
    // если прокрутили больше 100 пикселей показываем кнопку «вверх»
    // иначе прячем
    if (countScroll>100){
    $(‘.in_top’).show();
    }else{
    $(‘.in_top’).hide();
    }
    });
    });

    В файле стилей прописал.
    Полоса упорно не показывается..

    1. Здравствуйте.
      А javaScript вы оборачиваете тегом script ?
      Библиотека jQuery подключена?

      1. Не знаю, как проверить наличие этой библиотеки. Firebug говорит, что что-то есть, другой способ — что нет.
        Пока все сложно )

        1. Напишите мне на почту — admin@vk-book.ru
          Пришлите адрес сайта на котором устанавливаете кнопку или файл, если работаете локально.
          Я попытаюсь помочь

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

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

*