Live Code Editor Version 2.0

Hướng dẫn tạo Scroll To Top Button - Demo RUN

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            .container {
                width: 500px;
                margin: auto;
            }
            /* định dạng cho button */
            #myBtn {
              display: none; /* Mặc định button sẽ được ẩn*/
              position: fixed;
              bottom: 20px;
              right: 30px; 
              z-index: 99; /* button được ưu tiên hiển thị đè lên các phần khác*/
              border: none;
              outline: none;
              background-color: red;
              color: white;
              cursor: pointer;
              padding: 15px;
              border-radius: 10px;
            }
             
            #myBtn:hover {
              background-color: #555;
}
        </style>
    </head>
    <body> 
        <div class="container">
            <button id="myBtn" title="Go to top">Back To Top</button>
            <div style="background-color:black;color:white;padding:30px">
                Freetuts.net hướng dẫn tạo Scroll To Top Button
            </div>
            <p style="background-color:#66FFCC;padding:30px 30px 2500px">
                PHP (viết tắt hồi quy "PHP: Hypertext Preprocessor") là một ngôn ngữ lập 
                trình kịch bản hay một loại mã lệnh chủ yếu được dùng để phát triển các ứng
                dụng viết cho máy chủ, mã nguồn mở, dùng cho mục đích tổng quát. Nó rất
                thích hợp với web và có thể dễ dàng nhúng vào trang HTML..
            </p>
        </div>    
    </body>
    <script>
        //Khi người dùng cuộn chuột thì gọi hàm scrollFunction
        window.onscroll = function() {scrollFunction()};
        // khai báo hàm scrollFunction
        function scrollFunction() {
            // Kiểm tra vị trí hiện tại của con trỏ so với nội dung trang
            if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
                //nếu lớn hơn 20px thì hiện button
                document.getElementById("myBtn").style.display = "block";
            } else {
                 //nếu nhỏ hơn 20px thì ẩn button
                document.getElementById("myBtn").style.display = "none";
            }
        }
        //gán sự kiện click cho button
        document.getElementById('myBtn').addEventListener("click", function(){
            //Nếu button được click thì nhảy về đầu trang
            document.body.scrollTop = 0;
            document.documentElement.scrollTop = 0;
        });
    </script>
</html>