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

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