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


<a href="#" class="cd-top">Back To Top</a>

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


/* back to top */
a.cd-top {
display: inline-block;
height: 40px;
width: 40px;
position: fixed;
bottom: 10px;
right: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
/* image replacement properties */
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
background: #3097D1 url("https://thinhweb.com/wp-content/themes/thinhweb/images/cd-top-arrow.svg") no-repeat center 50%;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity .3s 0s, visibility 0s .3s;
-moz-transition: opacity .3s 0s, visibility 0s .3s;
transition: opacity .3s 0s, visibility 0s .3s;
}
a.cd-top.cd-is-visible, a.cd-top.cd-fade-out, .no-touch a.cd-top:hover {
-webkit-transition: opacity .3s 0s, visibility 0s 0s;
-moz-transition: opacity .3s 0s, visibility 0s 0s;
transition: opacity .3s 0s, visibility 0s 0s;
}

a.cd-top, a.cd-top:visited, a.cd-top:hover {
color: #CCCCCC;
text-decoration: none;
}

a.cd-top.cd-is-visible {
/* the button becomes visible */
visibility: visible;
opacity: 1;
}
a.cd-top.cd-fade-out {
/* if the user keeps scrolling down, the button is out of focus and becomes less visible */
opacity: 1;
}

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.


jQuery(document).ready(function($){
// browser window scroll (in pixels) after which the "back to top" link is shown
var offset = 300,
//browser window scroll (in pixels) after which the "back to top" link opacity is reduced
offset_opacity = 1200,
//duration of the top scrolling animation (in ms)
scroll_top_duration = 700,
//grab the "back to top" link
$back_to_top = $('.cd-top');

//hide or show the "back to top" link
$(window).scroll(function(){
( $(this).scrollTop() > offset ) ? $back_to_top.addClass('cd-is-visible') : $back_to_top.removeClass('cd-is-visible cd-fade-out');
if( $(this).scrollTop() > offset_opacity ) {
$back_to_top.addClass('cd-fade-out');
}
});

//smooth scroll to top
$back_to_top.on('click', function(event){
event.preventDefault();
$('body,html').animate({
scrollTop: 0 ,
}, scroll_top_duration
);
});

});

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

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

  1. Quyết Thành viết:

    Em chào Bác, xin làm ơn cho em hỏi, sao nút Back To Top của em nó chỉ hiện khoảng 3s trên màn, xong scroll xuống không hiện nữa vậy ạ? Em cần phải sửa ở chỗ nào ạ? Em cảm ơn Bác nhiều.

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

      Bạn bổ sung thêm z-index cho chỉ số nó lớn hơn các phần khác, cái này là do theme bạn xài dùng z-index nhiều và số nó lớn hơn của backtotop

  2. hamhochois viết:

    Bài viết hay và bỗ ích.
    Cho mình hỏi thêm >>> mình muốn di chuyển nút cuộn lên trên tí thay vì sát phía dưới thì làm sao ? Khi người khác gắn – làm sao biết tìm trong thư mục nào trong host ?

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

      Bạn sẽ phải dùng css điều chỉnh chỉ số bottom tăng lên là nó cách mép dưới ra nheiuef hơn

  3. Vinh Tu viết:

    ad ơi. cho em hỏi nếu không sử dung iquery mà sử dụng react thì phải làm sao ạ. cám ơn ad nhiều reply mình sớmnhé

  4. hiệp viết:

    hay lắm, cám ơn ad

  5. 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

  6. 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