Bootstrap 3, плавная кнопка "наверх"

17 июня 2019

Плавная кнопка "наверх", универсальная, подойдет к любому сайту, собранному на Bootstrap 3

Делать элементарно.

Код CSS

.back-to-top {
    cursor: pointer;
    position: fixed;
    bottom: 20px;
    right: 20px;
    display:none;
    font-size:2.5em
}

И сама кнопка

<a id="back-to-top" href="#" class="back-to-top hidden-xs" role="button" data-toggle="tooltip" data-placement="left">
<span class="glyphicon glyphicon-chevron-up"></span>
</a>
<script>
$(document).ready(function(){
     $(window).scroll(function () {
            if ($(this).scrollTop() > 50) {
                $('#back-to-top').fadeIn();
            } else {
                $('#back-to-top').fadeOut();
            }
        });
        // scroll body to 0px on click
        $('#back-to-top').click(function () {
            $('#back-to-top').tooltip('hide');
            $('body,html').animate({
                scrollTop: 0
            }, 800);
            return false;
        });
        $('#back-to-top').tooltip('show');
});
</script>

Как видно из кода, кнопка hidden-xs, т.е. не видна на малых экранах. В качестве самой кнопки взят бутстраповский glyphicon-chevron-up. Можете поменять на свой вкус.