Trang chủ
Blogspot Tips

Cách tạo nút cuộn lên đầu trang (Scroll Back To Top) có thanh tiến độ

Tạo nút cuộn lên đầu trang có hiển thị tiến độ bằng HTML, CSS và JavaScript. Hướng dẫn từng bước đơn giản.
Vũ Văn Hoàn

Việc thêm chỉ báo tiến độ vào nút giúp người dùng hình dung rõ ràng mức độ cuộn trang. Chỉ báo này có thể được hiển thị dưới dạng một thanh mỏng, đầy dần khi người dùng cuộn trang, giúp họ dễ dàng theo dõi vị trí của mình. Chỉ báo tiến độ đặc biệt hữu ích cho các trang có nhiều nội dung hoặc các trang web sử dụng thiết kế hiệu ứng thị sai (parallax).

Trong hướng dẫn này, chúng ta sẽ sử dụng HTML, CSS và JavaScript để tạo một nút cuộn lên đầu trang có hiển thị tiến độ. Hướng dẫn này thân thiện với người mới bắt đầu và yêu cầu kiến ​​thức cơ bản về HTML, CSS và JavaScript. Chúng ta sẽ cùng nhau tìm hiểu từng bước quy trình xây dựng một nút cuộn lên đầu trang đơn giản và hiệu quả với thanh tiến độ. Sau khi hoàn thành hướng dẫn này, bạn sẽ hiểu cách cải thiện trải nghiệm người dùng và điều hướng trên trang web của mình.

Hãy bắt đầu xây dựng nút cuộn lên đầu trang có hiển thị tiến độ bằng HTML, CSS và JavaScript.

Mã nguồn:

Bước 1 (Mã HTML):

Đây là cấu trúc cơ bản của nút cuộn lên đầu trang bằng HTML, và giờ chúng ta có thể chuyển sang phần tạo kiểu cho nó bằng CSS.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Scroll to top button with progress indicator</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css' rel='stylesheet' />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="container">
      <h1 class="text-center">Scroll</h1>
    </div>
    <div class="progress-wrap">
      <svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
          <path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
      </svg>
  </div>
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
  <script src="script.js"></script>
  </body>
</html>

Bước 2 (Mã CSS)::

Sau khi hoàn thiện cấu trúc HTML cơ bản của nút cuộn lên đầu trang, bước tiếp theo là thêm kiểu dáng cho nút bằng CSS.

<style>.container{
  display: flex;
  justify-content: center;
  width: auto;
  height: 200vh;
}

h1{
  font-size: 12vw;
}

.progress-wrap {
  position: fixed;
  right: 50px;
  bottom: 50px;
  height: 46px;
  width: 46px;
  cursor: pointer;
  display: block;
  border-radius: 50px;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.2);
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}

.progress-wrap.active-progress {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.progress-wrap::after {
  position: absolute;
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f062';
  text-align: center;
  line-height: 46px;
  font-size: 18px;
  color: #1f2029;
  left: 0;
  top: 0;
  height: 46px;
  width: 46px;
  cursor: pointer;
  display: block;
  z-index: 1;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}

.lightScrollIcon::after {
  color: #ecedf3 !important;
}

.progress-wrap:hover::after {
  opacity: 0;
}

.progress-wrap::before {
  position: absolute;
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f062';
  text-align: center;
  line-height: 46px;
  font-size: 18px;
  opacity: 0;
  background-image: linear-gradient(298deg, #da2c4d, #f8ab37);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  left: 0;
  top: 0;
  height: 46px;
  width: 46px;
  cursor: pointer;
  display: block;
  z-index: 2;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}

.progress-wrap:hover::before {
  opacity: 1;
}

.progress-wrap svg path {
  fill: none;
}

.progress-wrap svg.progress-circle path {
  stroke: #1f2029;
  stroke-width: 4;
  box-sizing: border-box;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}</style>

Bước 3 (Mã JavaScript):

Cuối cùng, chúng ta cần tạo một hàm hiển thị tiến độ bằng JavaScript.

<script>/*<![CDATA[*/ (function($) { "use strict";

$(document).ready(function(){"use strict";

		//Scroll back to top

		var progressPath = document.querySelector('.progress-wrap path');
		var 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';
		var updateProgress = function () {
			var scroll = $(window).scrollTop();
			var height = $(document).height() - $(window).height();
			var progress = pathLength - (scroll * pathLength / height);
			progressPath.style.strokeDashoffset = progress;
		}
		updateProgress();
		$(window).scroll(updateProgress);
		var offset = 50;
		var duration = 550;
		jQuery(window).on('scroll', function() {
			if (jQuery(this).scrollTop() > offset) {
				jQuery('.progress-wrap').addClass('active-progress');
			} else {
				jQuery('.progress-wrap').removeClass('active-progress');
			}
		});
		jQuery('.progress-wrap').on('click', function(event) {
			event.preventDefault();
			jQuery('html, body').animate({scrollTop: 0}, duration);
			return false;
		})


	});

})(jQuery); /*]]>*/</script>

Kết quả cuối cùng:

Nút cuộn lên đầu trang với chỉ báo tiến độ sử dụng html, css và javascript.gif

Phần kết luận:

Trong hướng dẫn này, chúng tôi đã chỉ cho bạn cách tạo nút cuộn lên đầu trang có hiển thị tiến độ bằng HTML, CSS và JavaScript . Bằng cách thêm nút cuộn lên đầu trang vào trang web của bạn, bạn có thể cải thiện trải nghiệm người dùng và giúp người dùng dễ dàng điều hướng trang web hơn. Hiển thị tiến độ cung cấp cho người dùng hình ảnh trực quan về tiến trình của họ trên trang, giúp họ dễ dàng điều hướng các trang dài hoặc các trang có nhiều nội dung.

Hãy nhớ rằng, bạn có thể tùy chỉnh thiết kế của nút và chỉ báo tiến độ để phù hợp với phong cách trang web của mình. Bạn cũng có thể thêm hiệu ứng di chuột và hoạt ảnh để làm cho nút và chỉ báo tương tác hơn.

Bằng cách làm theo các bước được nêu trong hướng dẫn này, bạn có thể dễ dàng thêm nút cuộn lên đầu trang kèm chỉ báo tiến độ vào trang web của mình. Điều này không chỉ cải thiện trải nghiệm người dùng và khả năng điều hướng trên trang web của bạn mà còn giúp trang web trông chuyên nghiệp hơn.

Chúng tôi hy vọng hướng dẫn này đã hữu ích và giúp bạn hiểu rõ hơn cách cải thiện trải nghiệm người dùng và điều hướng trên trang web của mình.

Vậy là xong!

Tôi hy vọng bạn thích bài viết này. Giờ đây, với những ví dụ này, bạn có thể tạo ra trang web tuyệt vời của riêng mình.

Đăng nhận xét