Chức năng Back to top JS đơn giản

by admin in Javascript

Hiện nay hầu hết các trang Tin tức, Blog, Thương mai điện tử hay những website có nội dung dài hơn một trang thì chức năng Back to top khá tiện lợi, ở mọi vị trí mà con trỏ chuột ngoài phạm vi một màn hình khách hàng chỉ cần click và ngay lập tức màn hình sẽ di chuyển tới đầu trang.

Tất nhiên tùy kích thước màn hình, và nếu vị trí con trỏ chuột vẫn ở trong kích thước màn hình đầu tiên thì chức năng Back to top sẽ không hiển thị.

Trong ví dụ dưới đây sẽ giải thích rõ ràng hơn với ví dụ là những dòng code:

1. HTML

Trong cặp thẻ detail-content là nội dung hiển thị của bạn, nếu nội dung ngắn hơn 1 màn hình thì Backtotop sẽ không hiển thị.

<div class=”container”>
<div class=”detail-content”>
Content…
</div>
</div>

Thẻ p chứa hình ảnh, icon backtotop, nó được xử lý bởi đoạn CSS để hiển thị ở phía dưới góc phải màn hình.

<p id=”back-top” data-toggle=”tooltip” data-placement=”top” title=”Back-to-top”> </p>

2. CSS

Chỉ đơn giản lấy hình ảnh hoặc icon mà bạn muốn, vị trí của hình ảnh.

#back-top {
padding: 5px 3px;
background: url(https://sharelifeinjapan.com/wp-content/uploads/2020/04/back-to-top.png) no-repeat top center;
color: #fff;
position: fixed;
bottom: 50px;
right: 16px;
display: none;
width: 50px;
height: 50px;
}

3. Js, Javascipt

– Gọi thư viện, chỉ thư viện jquery là đủ:

<script src=”https://sharelifeinjapan.com/wp-content/themes/miniblog/vendor/jquery/jquery.min.js”></script>

– Xử lý thuộc tính:

$(document).ready(function(){
// hide #back-top first
$(“#back-top”).hide();
// fade in #back-top

$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$(‘#back-top’).fadeIn();
} else {
$(‘#back-top’).fadeOut();
}
});
// scroll body to 0px on click
$(‘#back-top’).click(function () {
$(‘body,html’).animate({
scrollTop: 0
}, 800);
return false;
});
});
});