<header class="ow">
        <div class="header_class ow">
                Header height 100px fixed (background pink)
        </div>
    </header>
    <section class="ow">
        Section height 1000px (background blue)
    </section>
    <footer class="ow">
        <div class="div_backtop">😇</div>
        Footer height 100px (background green)
    </footer>
    .ow{
        width: 100%;
        overflow: hidden;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content:center;
    }
    .header_class{
        background: rgba(255, 192, 203, 0.49);
        height: 100px;
        position: fixed;
        top: 0;
        left: 0;
    }
    section {
        background: blue;
        height: 1000px;
        color: #fff;
    }
    footer {
        background: green;
        height: 150px;
    }

    .div_backtop{
      font-size:38px;
      position:fixed;
      bottom:20px;
      right:40px;
      cursor:pointer
    }
$(document).ready(function() {
    var topBtn = $('.div_backtop'); // khai báo 1 biến topBtn bằng nút có id "back-to-top"
    topBtn.hide(); // mặc định cho nút ẩn đi
    $(function() {
        $(window).scroll(function() { // sự kiện lăn chuột
            if ($(this).scrollTop() > 100) { // nếu khoảng cách với top lớn hơn 100px
                topBtn.fadeIn(); // thì hiện nút "back-to-top" lên
            } else {
                topBtn.fadeOut(); // ngược lại ẩn nút đi
            }
        });
        topBtn.click(function() { // bắt sự kiện khi click vào nút
            $('body,html').animate({
                scrollTop: 0
            }, 1000); // thời gian di chuyển về đầu trang
            return false;
        });
    });
  
  
  $(window).scroll(function(){
    var show = $(window).scrollTop() + $(window).height();
    var hide = $(document).height() - $('footer').height();
    var height = $(document).height() - show;
    $('.div_backtop').css("bottom",$('footer').height() - height);
    if(show<hide){
       $('.div_backtop').css("bottom",20);
    }
  })
});

Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.jquery.com/jquery-3.5.0.js