JS/jQuery

Кнопки прокрутки страницы вверх и вниз jQuery

Несколько примеров как сделать кнопки прокрутки страницы вверх и вниз. Для скроллинга используется jQuery функция animate.

.animate(properties, duration, easing, complete);

Где:

  • properties – свойства, к которым будет применятся анимация;
  • duration – время анимации, мс;
  • easing – метод анимации, по умолчанию swing замедление в начале и конце или linear постоянная скорость;
  • complete – функция, вызываемая после завершения анимации.
1

Кнопка «Вниз»

Стационарная ссылка или кнопка для прокрутки страницы в самый низ.

<a href="#" id="scroll_bottom">↓ Вниз</a>
$(function(){
    $('#scroll_bottom').click(function(){
        $('html, body').animate({scrollTop: $(document).height() - $(window).height()}, 600);
        return false;
    });
});

Пример:

2

Кнопка «Наверх»

Также ссылка или кнопка для прокрутки в начало страницы.

<a href="#" id="scroll_top">↑ Наверх</a>
$(function(){
    $('#scroll_top').click(function(){
        $('html, body').animate({scrollTop: 0}, 600);
        return false;
    });
});

Пример:

3

Плавающая кнопка

Кнопка появляется в нижнем правом углу и становится фиксированной при прокрутке страницы.

<a href="#" id="scroll_top" title="Наверх"></a>
#scroll_top {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
    width: 32px;
    height: 32px;
    background: url(https://snipp.ru/img/scroll_top.png) 50% 50% no-repeat;
    border-radius: 50%;
    opacity: 0.5;
}
#scroll_top:hover {
     opacity: 1;
}
$(function(){
    $(window).scroll(function(){
        if($(window).scrollTop() > 100) {
            $('#scroll_top').show();
        } else {
            $('#scroll_top').hide();
        }
    });
 
    $('#scroll_top').click(function(){
        $('html, body').animate({scrollTop: 0}, 600);
        return false;
    });
});

Пример:

4

Панель справа

Фиксированная панель, постоянно находится справой стороны окна браузера. При малой ширине окна она скрывается чтобы не наползать на контент.

<a href="#" id="scroll_top"><span>↑ Наверх</span></a>
.scroll_panel:hover {
    background: #eee; 
}

/* Наверх */
#scroll_top {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 90px;
    transition: background 0.2s ease;  
    display: block;
    height: 100%;    
    text-align: center;
     opacity: 0.5;
}
#scroll_top span {
    display: block;
    width: 100%;    
    position: absolute;
    left: 0;    
    top: 20px;
}
#scroll_top:hover {
    background: #ddd;      
    opacity: 1;
}

/* Скрытие панели при маленькой ширине окна */
@media screen and (max-width: 700px) {
    .scroll_panel {
        display: none;
    }
}
$(function(){
    $(window).scroll(function(){
        if($(window).scrollTop() > 100) {
            $('#scroll_top').show();
        } else {
            $('#scroll_top').hide();
        }
    });
 
    $('#scroll_top').click(function(){
        $('html, body').animate({scrollTop: 0}, 600);
        return false;
    });
});

Пример:

Дополненный вариант с кнопкой «Вниз»

<div class="scroll_panel">
    <a href="#" id="scroll_top"><span>↑ Наверх</span></a>
    <a href="#" id="scroll_bottom"><span>↓ Вниз</span></a>
</div>
.scroll_panel {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 90px;
    transition: background 0.2s ease;
}
.scroll_panel:hover {
    background: #eee; 
}

/* Наверх */
#scroll_top {
    display: block;
    width: 100%;
    height: 50%;    
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
     opacity: 0.5;
    transition: background 0.2s ease;
}
#scroll_top span {
    display: block;
    width: 100%;    
    position: absolute;
    left: 0;    
    top: 20px;
}
#scroll_top:hover {
    background: #ddd;      
    opacity: 1;
}

/* Вниз */
#scroll_bottom {
    display: block;
    width: 100%;
    height: 50%;    
    position: absolute;
    top: 50%;
    left: 0;
    text-align: center;
     opacity: 0.5;
    transition: background 0.2s ease;
}
#scroll_bottom span {
    display: block;
    width: 100%;    
    position: absolute;
    left: 0;    
    bottom: 20px;
}
#scroll_bottom:hover {
    background: #ddd; 
     opacity: 1;
}

/* Скрытие панели при маленькой ширине окна */
@media screen and (max-width: 700px) {
    .scroll_panel {
        display: none;
    }
}
$(function(){
    $('#scroll_top').click(function(){
        $('html, body').animate({scrollTop: 0}, 600);
        return false;
    });
    
    $('#scroll_bottom').click(function(){
        $('html, body').animate({scrollTop: $(document).height() - $(window).height()}, 600);
        return false;
    });
});
13 июня 2019
Применение масок ввода у полей форм значительно упрощает их использование, уменьшает количество ошибок и приводит...