Trong bố cục Blogspot thêm tiện ích HTML/Javascrip, sau đó dán đoạn code bên dưới vào:
<!--Nút về đầu trang-->
<style>
#back-to-top {
display: none;
position: fixed;
bottom: 20px;
right: 20px;
background-color: #3e8e41;
vertical-align: center;
text-align: center;
color: #fff;
width: 60px;
height: 60px;
border-radius: 50%;
text-align: center;
line-height: 40px;
cursor: pointer;
z-index: 1000;
}
#back-to-top:hover {
background-color: #4CAF50;
}
#back-to-top svg {
vertical-align: middle;
}
/* Điều chỉnh cho màn hình di động */
@media (max-width: 300px) {
#back-to-top {
bottom: 10px; /* Điều chỉnh khoảng cách từ đáy màn hình */
right: 10px; /* Điều chỉnh khoảng cách từ lề phải màn hình */
width: 35px; /* Giảm kích thước nút */
height: 35px; /* Giảm kích thước nút */
line-height: 35px; /* Điều chỉnh căn giữa dọc */
}
}
</style>
<a href="#" id="back-to-top" title="Về đầu trang">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24">
<path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6 1.41 1.41z"/>
</path></svg>
</a>
<script>
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("back-to-top").style.display = "block";
} else {
document.getElementById("back-to-top").style.display = "none";
}
}
</script>Kết quả:
