Chi tiết bài viết Detail

jQuery canh nút back to top với footer là giải pháp thường dùng khi thiết kế website.
Cách này giúp nút không bị che bởi footer và hiển thị đúng vị trí khi người dùng cuộn xuống.

Lý do dùng position fixed

Khi tạo nút Back to Top, thuộc tính CSS position: fixed gần như là lựa chọn bắt buộc.

• Luôn hiển thị: Giúp nút luôn nằm ở một vị trí cố định trên màn hình (thường là góc dưới bên phải) bất kể người dùng cuộn chuột đi đâu.
• Tiện lợi: Người dùng có thể bấm quay lại đầu trang ngay lập tức mà không cần vuốt ngược lên thủ công.

Code Jquery

$(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 || $(window).width()<=767){ 
            $('.div_backtop').css("bottom",20); 
            # NẾU MÀN HÌNH SP THÌ CANH BOTTOM 20PX 
        } 
    }
)

Trong đó $(‘.div_backtop’) là nút backtop

$(‘footer’) là footer mà mình muốn nút backtop đi theo

Các bài viết có thể bạn quan tâm:
Hướng dẫn so sánh hình ảnh bằng jQuery
Tạo hình ảnh 360 độ bằng JavaScript

Ví dụ

Link Codepen: buttom backtop fixed vs footer