Hướng dẫn tạo nút Back To Top cho website của bạn

back-to-top

Nút Back To Top hay còn gọi một cách đơn giản là nút trượt lên trên khi bạn đang ở cuối website. Nhưng nếu như bạn đang sử dụng framework thì sẽ có một số framework có sẵn nhưng đa phần thì cái này sẽ loại khỏi bộ framework bởi độ ưu tiên cao cũng như nó cũng không khó và phức tạp gì cả. Nhưng bạn đang cầm tìm một nút “Back To Top” hoạt động mượt mà uyển chuyển thì Thịnh chia sẻ với bạn đoạn mã tạo nút “Back To Top” cho bạn.

Để có được nút backtotop thì bạn cần phải biết chút ít jquery, html và css. Khi bạn viết đoạn code này nó sẽ được tính theo dạng như sau, khi bắt đầu kéo xuống thì nút backtotop bắt đầu hiện lên và cho tới tận khi bạn kéo thanh cuộn xuống cuối site. Nhưng khi bạn click vào nó thì nó sẽ tự động nhảy về trên đầu trang theo dạng trượt  và nó sẽ tự ẩn đi theo tính toán sẵn.

Nhưng điều quan trọng nữa là bạn cần thiết kế nút “Back To Top” đẹp hợp với site thì người dùng mới có cảm tình sử dụng nó.

Sau đây là hướng dẫn viết đoạn mã nút backtotop dành cho bạn.

Đầu tiên bạn cần soạn đoạn html như sau

Tiếp đến bạn viết đoạn css để trình bày hiển thị cũng như cho nó sang bên góc phải bên dưới màn hình như Thịnh đang sử dụng trên chính blog của thịnh

Tiếp đến bạn truy cập đường dẫn lấy hình ảnh nút backtotop của Thịnh: https://thinhweb.com/wp-content/themes/thinhweb/images/cd-top-arrow.svg

Tiếp theo bạn tạo một file backtotop.js và gọi đường dẫn tới file backtotop.js. Trong đó bạn soạn đoạn code như sau để nó thực thi tính toán khi đến vị trí thích hợp nó ẩn và hiện nút “Back To Top” bên trên.

Như vậy là xong, đơn giản chỉ có vậy thôi. Chúc các bạn thành công

4 comment on “Hướng dẫn tạo nút Back To Top cho website của bạn

  1. Lư Khúc Thành viết:

    Ngoài cách trên thì mình còn thấy, vào trang https://scrolltotop.org rồi chọn nút mình thích xong dán code tương ứng vào á

    1. Thịnh Nguyễn viết:

      Cách đó thì tiện thật nhưng bạn sẽ làm giảm tốc độ site của bạn vì bạn phải load 1 file js từ nhà người ta, hơn nữa js đó có thể là một mối nguy xâm hại site bạn, file js bên họ khá nhiều lệnh trong khi cách hướng dẫn của mình chỉ vài dòng lệnh nhẹ hơn rất nhiều nhé. Bạn chắc chưa gặp trường hợp là load file js từ nhà người ta mà site bạn hiện búa xua quảng cáo các thứ ko cần thiết và site bị chậm

  2. Phạm Hồng Minh viết:

    Bạn ơi làm tế nào để cũng với nút này mình có thể trượt xuống một vùng bất kì trên trang web. Giống như nút Discover now trong web này ạ: http://www.tooplate.com/view/2083-steak-house. Bạn trả lời nhanh giúp mình, mình đang cần gấp ạ

    1. Thịnh Nguyễn viết:

      Mình đâu có thấy nút Discover now nào đâu?
      Nếu bạn muốn lúc nào nó cũng hiện thì trong class css: a.cd-top bạn xóa 2 đoạn lệnh sau:
      visibility: hidden;
      opacity: 1;

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Back To Top