Tạo nút ‘Lên đầu trang’ (Back to top) cuộn mượt cho Blogger ~ blog chia sẻ kiến thức lập trình

Blog bạn quá dài và người đọc muốn chỉ cần một thao tác click chuột là có thể lên đến đầu trang blog. Bài viết sẽ hướng dẫn bạn chèn thêm nút “Lên đầu trang” mỗi khi bạn di chuyển ra xa đầu trang cùng hiệu ứng chuyển mượt đẹp mắt.

Bạn hãy thử cuộn xuống dưới một tí và để ý góc dưới bên phải của blog chúng mình, bạn sẽ thấy hiệu ứng.

Ưu điểm

Chỉ hiển thị khi không ở đầu trang.
Không cần chỉnh sửa template gốc.

Cách thực hiện

Đi đến Blogger Dasboard > chọn blog của bạn > chọn thẻ Layout > nhấn Add a Gadget > Chọn Thêm HTML/JavaScript

Bỏ trống phần Tiêu đề và dán đoạn code sau đây vào phần Nội dung

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
<style>
div#page {
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
.back-to-top {
position: fixed;
bottom: 2em;
right: 0px;
text-decoration: none;
color: #000000;
background-color: rgba(235, 235, 235, 0.80);
font-size: 12px;
padding: 1em;
display: none;
font-weight: bold;
}
.back-to-top:hover {
background-color: rgba(135, 135, 135, 0.50);
text-decoration: none;
}
</style>
<a class="back-to-top" href="#">Len dau trang</a>

Sau đó nhấn Lưu tiện ích và bạn đã thành công.

Nếu bạn biết một chút ít về CSS và HTML, bạn có thể tùy chỉnh cách hiển thị của nút theo như ý bạn. Blog sẽ có một bài hướng dẫn dành cho dân không chuyên về điều này sau.

Bài viết tham khảo từ trang Gumdi.com