Hướng dẫn thêm nút "Back to top" vào website

Việc thêm nút "Back to top" vào website giúp khách hàng hoặc người xem khi cần trở về đầu trang có thể thuận tiện và dễ dàng hơn. Một số website có nội dung dài khiến người xem sẽ khó chịu khi cần trở lại đầu trang. Hầu hết các Themes Web đẹp hiện nay đều có tích hợp sẵn nút "Back to top" cho themes. Nếu website anh/chị vẫn còn thiếu thì hôm nay, tôi sẽ hướng dẫn anh/chị tích hợp nút này vào website.

Để chèn nút "Back to top" vào website, anh/chị cần thêm 3 đoạn code theo thứ tự vào trước thẻ </body>

1: Chèn code Css: với đoạn code Css anh/chị có thể chèn trực tiếp vào file .css mà website đang dùng hoặc nếu không rõ có thể chèn trực tiếp đoạn code dưới đây vào trước thẻ </body> là được.
<style>
.scroll-to-top{

position: fixed;
bottom: 10px;
right: 10px;
width: 40px;
height: 40px;
background: #119991;
border: 1px solid #119991;
text-align: center;
z-index: 100;
border-radius: 3px;
display: none;
}

.scroll-to-top img{
margin-top: 5px;
}
</style>

2. Chèn code html: Sau khi chèn code Css, anh/chị tiếp tục chèn code html vào trước thẻ </body>

</div>

3. Chèn code javascipt: cuối cùng anh/chị chèn đoạn code javascript

Lưu ý: nếu website anh/chị chưa có jquery thì mới chèn vào, nếu đã có rồi thì bỏ qua nhé.

Chèn đoạn code chính này vào:

var offset = 200;

var duration = 500;

$(window).scroll(function () {

if ($(this).scrollTop() > offset) {

$('.scroll-to-top').fadeIn(400);

} else {

$('.scroll-to-top').fadeOut(400);

}

});

$('.scroll-to-top').click(function (event) {

event.preventDefault();

$('html, body').animate({

scrollTop: 0

}, 600);

return false;

});

</script>

Nếu anh/chị chưa làm được thì để lại comment bên dưới, tôi sẽ hướng dẫn thêm.

Xem thêm: Hướng dẫn đăng ký SSL miễn phí tự động "Automatic FTP Verification"