Để cuộn đến một id hoặc phần tử cụ thể, chúng tôi sử dụng các phương pháp JavaScript để kích hoạt các thẻ liên kết. Việc sử dụng các phương thức scrollIntoView, scrollTo với định vị offset đã làm cho quá trình nhảy đến một phần tử được chỉ định rất thuận tiện.

Bạn đang xem : cuộn đến id html

Trong trường hợp chung, khi chúng tôi đặt thẻ liên kết trong nội dung HTML và đặt href đến một id cụ thể, chúng ta có thể cuộn đến phần tử đó. Nhưng phương pháp này hầu như không được hoan nghênh đối với các trường hợp động.

Khi cuộn đến một id của cùng một trang web, chúng tôi gọi đó là liên kết nội bộ. Chúng ta sẽ thấy các cách thực hiện liên kết nội bộ thông qua các phương thức JavaScript trong các ví dụ sau.

Phương thức scrollIntoView () là cách đáng tin cậy nhất để cuộn đến một id cụ thể. Nhưng trường hợp quan trọng nhất là lấy đúng querySelector .

Chỉ khi đó, bạn mới có thể định tuyến đến phần tử đó. Sau đó, chúng tôi cũng sẽ sử dụng phương thức scrollTo () để thiết lập các nhận xét bù đắp.

Hãy kiểm tra các phương pháp này để hiểu rõ hơn.

Sử dụng phương thức scrollIntoView () để Cuộn đến ID trong JavaScript

Để cuộn đến một id cụ thể trong JavaScript, chúng ta có thể sử dụng phương thức scrollIntoView () .

Cuộn lên

Để cuộn đến các phần tử trong phân đoạn trên từ liên kết hành động, chúng tôi sẽ đặt tham số của scrollIntoView () thành true . Sau khi nhấp vào liên kết, điều này đảm bảo rằng trang sẽ được nhấn mạnh và chúng tôi sẽ đạt được mục tiêu ở trên.

Đoạn mã:

  & lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
  & lt; meta charset = "utf-8" & gt;
  & lt; meta name = "viewport" content = "width = device-width" & gt;
  & lt; title & gt; Tài liệu & lt; / title & gt;
  & lt; phong cách & gt;

    #màu xanh da trời{
      chiều cao: 200px;
      nền: xanh lam;
    }
    #Danh bong{
      chiều cao: 800px;
    }
    một{
      văn bản-trang trí: không có;
      màu đen;
    }
  & lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;
  & lt; div id = "blue" & gt; & lt; / div & gt;
  & lt; div id = "buff" & gt; & lt; / div & gt;
  & lt; a href = "javascript: scroll ();" & gt; Truy cập BLUE & lt; / a & gt;
  & lt; script & gt;
  function scroll () {
    var getMeTo = document.getElementById ("blue");
    getMeTo.scrollIntoView ({behavior: 'Smooth'}, true);
  }
  & lt; / script & gt;
& lt; / body & gt;
& lt; / html & gt;
 

Đầu ra:

Cuộn xuống

Tương tự, ở đây chúng tôi sẽ đặt tham số bổ sung thành < code> false , và do đó sự khác biệt được tạo ra.

Đoạn mã:

  & lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
  & lt; meta charset = "utf-8" & gt;
  & lt; meta name = "viewport" content = "width = device-width" & gt;
  & lt; title & gt; Tài liệu & lt; / title & gt;
  & lt; phong cách & gt;
    #màu xanh da trời{
      chiều cao: 200px;
      nền: xanh lam;
    }
    #Danh bong{
      chiều cao: 800px;
    }
    một{
      văn bản-trang trí: không có;
      màu đen;
    }
  & lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;
  & lt; a href = "javascript: scroll ();" & gt; Truy cập BLUE & lt; / a & gt;
  & lt; div id = "buff" & gt; & lt; / div & gt;
  & lt; div id = "blue" & gt; & lt; / div & gt;
  & lt; script & gt;
  function scroll () {
    var getMeTo = document.getElementById ("blue");
   getMeTo.scrollIntoView ({behavior: 'Smooth'}, false);
  }
  & lt; / script & gt;
& lt; / body & gt;
& lt; / html & gt;
 

Đầu ra:

Sử dụng phương pháp scrollTo () Với tính toán ở chế độ xem thủ công để cuộn đến ID trong JavaScript

Trong trường hợp này, ban đầu chúng tôi sẽ chọn phần tử của mình và sau đó chúng tôi cũng sẽ đặt giá trị bù đắp. Đối với bước tiếp theo, chúng ta sẽ lấy vị trí của phần trên cùng của phần thân và tương tự đảm bảo vị trí trên cùng của các phần tử của chúng ta thông qua phương thức .getBainstClientRect () .

Tiếp theo, chúng tôi sẽ thực hiện một phép toán tổng quát để có được các phép đo mong muốn cho cuộn. Hàng rào mã sẽ thể hiện điều này một cách trực quan hơn.

Đoạn mã:

  & lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
  & lt; meta charset = "utf-8" & gt;
  & lt; meta name = "viewport" content = "width = device-width" & gt;
  & lt; title & gt; Tài liệu & lt; / title & gt;
  & lt; phong cách & gt;
    #màu đỏ tía{
      chiều cao: 200px;
      nền: màu tím;
    }
    #Danh bong{
      chiều cao: 800px;
    }
    một{
      văn bản-trang trí: không có;
      màu đen;
    }
  & lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;
  & lt; div id = "màu tím" & gt; & lt; / div & gt;
  & lt; div id = "buff" & gt; & lt; / div & gt;
  & lt; a href = "javascript: scroll ();" & gt; Đến Tím & lt; / a & gt;
  & lt; script & gt;
  function scroll () {
    const element = document.getElementById ('màu tím');
    const bù = 50;
    const bodyRect = document.body.getBoundsClientRect (). top;
    const elementRect = element.getBoundsClientRect (). top;
    const elementPosition = elementRect - bodyRect;
    const offsetPosition = elementPosition - bù đắp;

window.scrollTo ({
  hàng đầu: offsetPosition,
  hành vi: 'mượt mà'
});
  }
  & lt; / script & gt;
& lt; / body & gt;
& lt; / html & gt;
 

Đầu ra:

Sử dụng phương pháp scrollTo () Với scrollLeft scrollTop để cuộn đến ID trong JavaScript

< p> Ví dụ này ngụ ý thiết lập các thuộc tính cho phương thức scrollTo () . Cú pháp rất dễ hiểu.

Chúng tôi sẽ lấy ví dụ về phần tử của chúng tôi và đặt vị trí trên cùng và bên trái của cuộn qua element.scrollTop element.scrollLeft . Hãy tham gia vào cơ sở mã.

Đoạn mã:

  & lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
  & lt; meta charset = "utf-8" & gt;
  & lt; meta name = "viewport" content = "width = device-width" & gt;
  & lt; title & gt; Tài liệu & lt; / title & gt;
  & lt; phong cách & gt;
    #màu vàng{
      chiều cao: 200px;
      nền: màu vàng;
    }
    #Danh bong{
      chiều cao: 800px;
    }
    một{
      văn bản-trang trí: không có;
      màu đen;
    }
  & lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;
  & lt; div id = "yellow" & gt; & lt; / div & gt;
  & lt; div id = "buff" & gt; & lt; / div & gt;
  & lt; a href = "javascript: scroll ();" & gt; Chuyển sang màu vàng & lt; / a & gt;
  & lt; script & gt;
  function scroll () {
    var getMeTo = document.getElementById ("màu vàng");
    window.scrollTo ({
      đầu trang: getMeTo.scrollTop,
      left: getMeTo.scrollLeft});
  }
  & lt; / script & gt;
& lt; / body & gt;
& lt; / html & gt;
 

Đầu ra:

Viết cho chúng tôi

Các bài báo về DelftStack được viết bởi những người đam mê phần mềm như bạn. Nếu bạn cũng muốn đóng góp cho DelftStack bằng cách viết các bài báo trả phí, bạn có thể xem trang viết cho chúng tôi .


Xem thêm những thông tin liên quan đến chủ đề cuộn đến id html

#6 – What Is An Id in HTML

  • Tác giả: LevelUpTuts
  • Ngày đăng: 2015-09-07
  • Đánh giá: 4 ⭐ ( 2368 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: In this video, I talk about how and why to use Ids in HTML.

    In this video series, I teach you how to build your first website. No prior experience needed.

    The best shared web hosting
    http://www.bluehost.com/track/leveluptutorials/

    https://www.patreon.com/leveluptuts

    Subscribe to Level Up Pro for extra features!
    https://www.leveluptutorials.com/store/products/pro

    Subscribe to the Level Up Newsletter
    http://eepurl.com/AWjGz

    For questions post in the comments or visit:
    http://leveluptuts.com/forum

    To Support Level Up Tuts:
    http://leveluptuts.com/donations

    Simple cloud hosting, built for developers.:
    https://www.digitalocean.com/?refcode=67357174b09e

HTML Thuộc Tính ID

  • Tác giả: www.codehub.com.vn
  • Đánh giá: 5 ⭐ ( 4051 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thuộc tính ID được dùng để gán một giá trị duy nhất (ID) cho phần tử trên trang, giá trị này được dùng để phân biệt các phần tử khác nhau trên trang.

Javascrip thêm class và remove khi cuộn tới id nào đó (for blogspot)

  • Tác giả: www.toilaquantri.com
  • Đánh giá: 3 ⭐ ( 8783 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thủ thuật dưới đây sẽ thêm class nhưng sẽ remove (xóa class) khi cuộn tới class nào đó tính từ đầu màn hình

[HTML/HTML5] Phần 14: Liên kết trong HTML

  • Tác giả: www.dammio.com
  • Đánh giá: 3 ⭐ ( 2317 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

[Tự học THML] Thuộc tính id trong HTML

  • Tác giả: cafedev.vn
  • Đánh giá: 3 ⭐ ( 8487 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Thuộc tính id trong HTML

  • Tác giả: hocjavascript.net
  • Đánh giá: 5 ⭐ ( 6799 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong HTML, thuộc tính id trong HTML được dùng để xác định một id duy nhất cho một phần tử HTML (giá trị phải là duy nhất trong file HTML). Giá trị id

The id attribute

  • Tác giả: www.w3schools.com
  • Đánh giá: 4 ⭐ ( 1782 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  HTTP Headers Explained - http header

By ads_php