Thuộc tính hành vi cuộn được sử dụng để đặt hành vi cuộn. Chúng tôi có thể đặt các giá trị thuộc tính khác nhau sau đây cho thuộc tính hành vi cuộn -
scroll-behavior: auto|smooth|initial|inherit;
Ví dụ
Bây giờ chúng ta hãy xem một ví dụ để triển khai thuộc tính sroll-behavior -
<!DOCTYPE html>
<html>
<head>
<style>
html {
scroll-behavior: smooth;
}
#area1 {
height: 400px;
background-color: red;
}
#area2 {
height: 600px;
background-color: orange;
}
#area3 {
height: 550px;
background-color: magenta;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<div class="main" id="area1">
<h2>Section 1</h2>
<a href="#area2">Reach Section 2</a>
</div>
<div class="main" id="area2">
<h2>Section 2</h2>
<a href="#area3">Reach Section 3</a>
</div>
<div class="main" id="area3">
<h2>Section 3</h2>
<a href="#area1">Reach Section 1</a>
</div>
</body>
</html> Đầu ra
Bây giờ, hãy nhấp vào “Tiếp cận Phần 2” -
Bây giờ, hãy nhấp vào “Tiếp cận Phần 3” để cuộn mượt mà đến Phần 3 -
