Плавная прокрутка вверх (кнопка наверх) страницы с помощью jQuery


17:36, 19/03/2018

jQuery

// Scroll to Top
function scrollToTop() {
    goTop = '#goTop';

    $('body').append('
↑ Scroll To Top
'); $(goTop).hide(); $(window).scroll(function() { if ($(this).scrollTop() > 600) { // pixels from top $(goTop).fadeIn(); } else { $(goTop).fadeOut(); } }); $(goTop).click(function() { $('body, html').animate({scrollTop: 0}, 500); // animation speed }); } $(document).ready(function() { // Init Scroll to top scrollToTop(); });

Styles (Less with Bootstrap 3)

// Scroll to Top
#goTop {
    .hidden-xs();
    .hidden-sm();

    background-image: url(https://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-07-128.png);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;

    cursor: pointer;
    text-indent: -9999px;
    z-index: 10;

    display: block;
    height: 25%;
    width: 7%;
    
    position: fixed;
    right: 1%;
    bottom: 1%;
}


Комментарии