Простой пример как сделать плавный скрол до шапки

21.10.2019

Базовый пример того, как можно сделать кнопку для скрола до шапки сайта. В примере использоваться fontawesome и jQuery, но вполне можно обойтись и без них.

Кнопка появляется, только если посетитель промотал сайт на 300 пикселей вниз.

Демонстрацию работы можно посмотреть тут.

Также Вам может понравиться Вариант с расширенным функционалом и без использования jQuery.

HTML:

 
<div id="scrollup" class="scrollup">
    <i class="fas fa-angle-up"></i>
</div>

CSS:

 
#scrollup {
    position: fixed;
    width: 60px;
    height: 60px;
    display: flex;
    bottom: 30px;
    right: 25px;
    cursor: pointer;
    transition: .75s ease;
    //transition: .25s ease;
    border-radius: 50%;
    text-align: center;
    color: rgb(15, 160, 39);
    background: rgba(0,0,0,.1);
    transform: translateX(90px) rotate(360deg);
    border: 1px solid rgba(255,255,255,.15);
    outline: 0;
}

#scrollup._on {
    transform: translateX(0) rotate(0);
}

#scrollup:hover {
    color: rgb(250, 160, 39);
    background: #032028;
}

#scrollup i {
    font-size: 28px;
    padding: 0;
    margin: auto;
}

Java Script (jQuery):

 
(function($){
    $(function() {

        // scrollup \/
        let elScrollup = $("#scrollup");
        elScrollup.on('click', function () {
            $('html,body').animate({
                scrollTop: 100
            }, 1000);
        });

        $(window).scroll(function() {
            if ($(document).scrollTop() < 500) {
                elScrollup.removeClass('_on');
            } else {
                elScrollup.addClass('_on');
            }

        });
    // scrollup /\

    });
})(jQuery);

Стоит обратить внимание на:

```
 
scrollTop: 100
```
100, это отступ от верха страницы, чаще всего используется, если есть фиксированная шапка, до которой нужно прокручивать. Если нет, то тсавим 0.
```
 
$('html,body').animate({
...
}, 1000);
```
1000 - скорость анимации прокрутки (в миллисекундах), чем больше, тем более плавным будет скрол.
```
 
if ($(document).scrollTop() < 500) {
```
500 - сколько пикселей должен проскролить человек, перед тем ,как кнопка будет показана.

Категории: JavaScript, CSS, JQuery

Пометки: Плавная промотка страницы до шапки сайта, scrollup

Простой пример как сделать плавный скрол до шапки

HTML:

CSS:

Java Script (jQuery):

Связанные материалы: