Создание кнопки с плавной прокруткой страницы наверх

Post 1

Каждый из нас хоть раз посещал такой сайт, который приходилось долго прокручивать в самый низ. А если потом надо вернуться обратно в начало страницы - без быстрого перехода это казалось весьма длительным и нудным делом. Вот поэтому многие сайты имеют в наличии такую полезную вещь, как кнопка "Наверх".


Мы попробуем сделать такую же кнопку, при том, что это делается легко и быстро.

Шаг 1: Подключаем библиотеку JQuery (желательно перед закрывающим тегом body).

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

Шаг 2: Пишем сам скрипт:

$(function(){
    var btn = $('.btn');                                      // Находим кнопку

    $(window).scroll(function(){
        if (btn.offset().top >= 800){                         // Отступ сверху, на котором появляется кнопка
            btn.fadeIn();
        } else {
            btn.fadeOut();
        }
    });
    btn.on('click',function(e){
        e.preventDefault();
        $('html,body').stop().animate({scrollTop: 0},500);    // Плавный скролинг кнопки наверх
    });
});

На этом пожалуй и всё.

Всего хорошего!

 

 

Вернуться

Категории

+380500000000