Botstrap 4, плавная кнопка "наверх"

23 сентября 2019

Готовое решение кнопки "наверх" для Bootstrap 4

Добавить стиль для плавного скролинга и стиль кнопки "Наверх"

html {scroll-behavior: smooth;}
/*стиль кнопки*/
#btnScroll{
    display:none;
    position:fixed;
    bottom:20px;
    left:20px;
    z-index:99;
    cursor:pointer;
}

В самом верху страницы, сразу после <body>, добавить

<a name="totop"></a>

Код вставки кнопки

<a id="btnScroll" href="#totop"><i class="fas fa-angle-up fa-3x"></i></a>
<script>
    window.onscroll = function(){
        scrollFunction();
    };
    function scrollFunction(){
        if(document.body.scrollTop > 20 || document.documentElement.scrollTop>20){
            document.getElementById("btnScroll").style.display = "block";            
            }else{
            document.getElementById("btnScroll").style.display = "none";
        }
    }
</script>