Và ưu điểm của code này là chỉ dùng javascript mà không cần sử dụng thư viện jquery hỗ trợ nên có thể đáp ứng được yêu cầu với nhiều người thiên về css.
Như chúng ta biết nút quay lại đầu trang hay thường gọi là back to top nó đóng một vai trò quan trọng trong trải nghiệm trên trang. Nó giúp người dùng quay lại đầu trang chỉ với một cái nhấp chuột và điều này cải thiện tốt trải nghiệm người dùng.
Demo
Và bây giờ hãy làm theo các bước để cài đặt Nút Quay lại Đầu trang có Tiến trình trên Trang web Blogger.
Bước 1: Đi tới Trang tổng quan Blogger.
Bước 2: Hãy nhấp vào Chủ đề> Chỉnh sửa HTML.
Bước 3: Sao chép mã css dán vào phần css của blog.
.btotop {
position: fixed;
right: 30px;
bottom: 30px;
height: 40px;
width: 40px;
cursor: pointer;
display: block;
border-radius: 50px;
box-shadow: inset 0 0 0 2px #ddd;
z-index: 10000;
opacity: 0;
visibility: hidden;
transform: translateY(25px);
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
}
.btotop.active-progress {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.btotop::after {
position: absolute;
content: '🠅';
text-align: center;
line-height: 40px;
font-size: 18px;
color: #666;
left: 0;
top: 0;
height: 40px;
width: 40px;
cursor: pointer;
display: block;
z-index: 1;
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
}
.btotop:hover::after {
opacity: 0;
}
.btotop::before {
position: absolute;
content: '🠅';
text-align: center;
line-height: 40px;
font-size: 18px;
opacity: 0;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
left: 0;
top: 0;
height: 40px;
width: 40px;
cursor: pointer;
display: block;
z-index: 2;
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
}
.btotop:hover::before {
opacity: 1;
}
.btotop svg path {
fill: none;
}
.btotop svg.progress-circle path {
stroke: #ff0000;
stroke-width: 4;
box-sizing:border-box;
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
}
.btotop svg{width:40px;height:40px}
.darkMode .btotop::after{color:#ddd}
.darkMode .btotop{background:#333;box-shadow: inset 0 0 0 2px #ff0000}
.darkMode .btotop svg.progress-circle path{stroke: #fff}
Bước 4: Dán javascript vào trước thẻ đóng </body>
<script>/*<![CDATA[*/
// back to top with progress
let progressPath = document.querySelector('.btotop path');
let pathLength = progressPath.getTotalLength();
progressPath.style.transition = progressPath.style.WebkitTransition = 'none';
progressPath.style.strokeDasharray = pathLength + ' ' + pathLength;
progressPath.style.strokeDashoffset = pathLength;
progressPath.getBoundingClientRect();
progressPath.style.transition = progressPath.style.WebkitTransition = 'stroke-dashoffset 10ms linear';
let updateProgress = function () {
let scroll = window.scrollY;
let height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
let progress = pathLength - (scroll * pathLength / height);
progressPath.style.strokeDashoffset = progress;
}
updateProgress();
window.onscroll = function(){updateProgress()};
let offset = 50;
let duration = 550;
let progress = document.getElementsByClassName('btotop');
window.addEventListener("scroll", function() {
if(window.scrollY > offset) {
Array.from(progress).forEach(function(pro) {
pro.classList.add('active-progress');
})
} else {
Array.from(progress).forEach(function(pro) {
pro.classList.remove('active-progress');
})
}
});
Array.from(progress).forEach(function(e) {
e.addEventListener('click', function(event) {
event.preventDefault();
window.scrollTo({top: 0, behavior: 'smooth'});
return false;
});
})
/*]]>*/</script>
Bước 5: Cuối cùng là dán code HTML sau vào trước </body>
<div class='btotop'> <svg class='progress-circle' height='100%' viewBox='-1 -1 102 102' width='100%'> <path d='M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98'/> </svg> </div>Trong phần css có class "darkMode" có thể khác nhau với các template vì vậy chỉnh sửa cho phù hợp.