Bài 18: Sử dụng Scrollspy trong Bootstrap để tạo cuộn trang

Bài 18: Sử dụng Scrollspy trong Bootstrap để tạo cuộn trang

Scrollspy trong Bootstrap cho phép bạn tạo một liên kết, khi bấm vào có thể di chuyển đến nội dung được đặt.

Bạn thường thấy ở trang Landing Page các menu thường sử dụng kiểu này để khi bấm vào trang web có thể cuộn ngay đến chỗ nội dung được đặt sẵn.

Cách sử dụng Scrollspy trong Bootstrap

Như code thông thường thì bạn có thể dùng id ở liên kết để trỏ đến vị trí nội dung có đặt sẵn id đó, thì Scrollspy trong Bootstrap cũng như vậy.

Nhưng trên thanh url không hiển thị id mà bạn click vào liên kết.

Tạo menu trỏ đến các tiêu đề trong bài viết

Bạn bấm vào liên kết trên menu thì ngay lập tức trình duyệt sẽ cuộn đến ví trí mà bạn cần tìm:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0" >
    <!-- Example Code -->
	<nav id="navbar-example2" class="navbar bg-body-tertiary px-3 mb-3">
	<a class="navbar-brand" href="#">Navbar</a>
	<ul class="nav nav-pills">
	<li class="nav-item">
	  <a class="nav-link" href="#scrollspyHeading1">First</a>
	</li>
	<li class="nav-item">
	  <a class="nav-link" href="#scrollspyHeading2">Second</a>
	</li>
	<li class="nav-item dropdown">
	  <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
	  <ul class="dropdown-menu">
		<li><a class="dropdown-item" href="#scrollspyHeading3">Third</a></li>
		<li><a class="dropdown-item" href="#scrollspyHeading4">Fourth</a></li>
		<li><hr class="dropdown-divider"></li>
		<li><a class="dropdown-item" href="#scrollspyHeading5">Fifth</a></li>
	  </ul>
	</li>
	</ul>
	</nav>
	<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" class="scrollspy-example bg-body-tertiary p-3 rounded-2" tabindex="0">
	<h4 id="scrollspyHeading1">First heading</h4>
	<p>...</p>
	<h4 id="scrollspyHeading2">Second heading</h4>
	<p>...</p>
	<h4 id="scrollspyHeading3">Third heading</h4>
	<p>...</p>
	<h4 id="scrollspyHeading4">Fourth heading</h4>
	<p>...</p>
	<h4 id="scrollspyHeading5">Fifth heading</h4>
	<p>...</p>
	</div>
	<!-- End Example Code -->
  </body>
</html>

Kết quả:

tao-lien-ket-tro-den-tieu-de-bang-scrollspy-bootstrap

Tạo Scrollspy kết hợp List group trong Bootstrap

Bạn cũng có thể kết hợp với bất cứ thành phần nào trong Bootstrap để tạo nên cuộn trang với quy tắc sau:

  • Khi bạn muốn cuộn trang đến một nội dung nào đó hãy đặt id cho nó, ví dụ muốn cuộn đến dòng tiêu đề: <h2 id=”vitricuon”>Nội dung tiêu đề</h2>
  • Ở phần link ta gọi như sau: <a href=”#vitricuon“>Cuộn đến nội dung tiêu đề</a>

Thì ở đây cũng vậy chúng ta thử tạo từ List goup xem sao nhé:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0" >
    <!-- Example Code -->
	<div class="row">
  <div class="col-4">
    <div id="list-example" class="list-group">
      <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
      <a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
      <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
      <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
    </div>
  </div>
  <div class="col-8">
    <div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-smooth-scroll="true" class="scrollspy-example" tabindex="0">
      <h4 id="list-item-1">Item 1</h4>
      <p>...</p>
      <h4 id="list-item-2">Item 2</h4>
      <p>...</p>
      <h4 id="list-item-3">Item 3</h4>
      <p>...</p>
      <h4 id="list-item-4">Item 4</h4>
      <p>...</p>
    </div>
  </div>
</div>
	<!-- End Example Code -->
  </body>
</html>

Kết quả:

ket-hop-list-groups-voi-scrollspy

Lời kết

Như vậy chúng ta đã biết cách sử dụng Scrollspy trong Bootstrap để tạo liên kết cuộn trang đến vị trí cần tìm trên trang web.

Các bạn có thể cần phải sử dụng nhiều trong lập trình giao diện, nhất là Landing Page.

Các bài viết cùng chủ đề:

Cảm ơn các bạn đã theo dõi bài viết này.

Rate this post

sonnguyen

Là một nhân viên IT thích chia sẻ những gì mình biết đến tất cả mọi người. Hi vọng được mọi người ủng hộ, nếu có gì sai sót mong các bạn comment xuống dưới để mình khắc phục. Cảm ơn mọi người!

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *