Tạo chức năng Back to top jQuery – scrollTo Top

Chức năng back to top hay là scrollTo Top một ví dụ sử dụng jQuery là một sự cần thiết cho tất cả website hiện nay, tuy nhỏ nhưng rất có ích dành cho các bạn lười kéo chuột chỉ cần bấm vào link sẽ lên trên đầu trang web. Chức năng back to top rất tiện lợi cho người dùng thường được khách hàng yêu cầu khi xây dựng website.

Hôm nay trong bài này mình muốn hướng dẫn các bạn xây dựng tính năng này dựa trên nền jQuery. Miêu tả là khi ở đầu trang thì ta không thấy link back to top khi kéo xuống 1 đoạn sẽ thấy link và khi bấm go to top thì sẽ lên trên đầu trang đồng thời cũng mất đi link go scrollTo Top này. Xem demo tại đây ⇒

Đầu tiên chúng ta chèn link back to top vào trong website, thường là ở dưới cùng còn năm trong thẻ body hay nói cách khác là trước thẻ đóng của body trong kịch bản HTML.

Sau đó chúng ta tiến hàng style CSS cho link chúng ta được đẹp mắt, bạn có thể dùng image, hay là FA icon cũng được tùy vào sở thích của mỗi người.

Lưu ý là display:none để khi load trang lên sẽ không thấy link go to top nha các bạn, position:fixed để khi bạn kéo thanh cuộn trang web thì link sẽ chạy theo ở 1 vị trí cố định nào đó. Rồi tiếp đến là mình code jQuery cho nó nhớ là import thư viện jQuery vào trước code mình viết sau đây nha.

Giải thích 1 chút về đoạn code trên: $(this).scrollTop() > 100 tức là khi kéo xuống độ chừng 100px là sẽ xuất hiện link go to top, fadeIn: hiện, fadeOut: ẩn. Tiếp đến là bắt sự kiến Click và trược lên trên. OK như vậy là chúng ta đã hoàn thành tính năng back top top. Chúc các bạn thành công.