Tidadigi Logo

CSS scroll-behavior Property

Thuộc tính này dùng để tạo hiệu ứng cuộn mượt thay vì nhảy cóc. Khi người dùng nhấp vào liên kết, nó sẽ hoạt động một cách trơn tru. Nó dùng để di chuyển giữa các liên kết trong một vùng cuộn.

Syntax:

scroll-behavior: auto|smooth|initial|inherit;

Default Value: auto 

Property:

  • smooth: Thuộc tính này dùng để chỉ định hiệu ứng hoạt ảnh khi cuộn. Hoạt ảnh này diễn ra giữa các phần tử trong vùng có thể cuộn.
  • auto: Nó chỉ định hiệu ứng cuộn nhảy thẳng khi truy cập liên kết. Nó giúp di chuyển từ liên kết này đến liên kết khác trong vùng cuộn.

Example: Trong ví dụ này, ta sử dụng thuộc tính scroll-behavior: smooth;.

html 
<!DOCTYPE html>
<html>
<head>
    <title>
        CSS | scroll-behavior Property
    </title>
    <style>
        .g4g {
            font-size: 40px;
            font-weight: bold;
            color: green;
            text-align: center;
        }

        html {
            scroll-behavior: smooth;
        }

        #geeks {
            height: 400px;
            background-color: coral;
        }

        #gfg {
            height: 400px;
            background-color: lightblue;
        }

        a {
            text-decoration: none;
            font-size: 25px;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div class="g4g">GeeksforGeeks</div>
    <h2 style="text-align:center;">
        Scroll-behaviour:smooth;
    </h2>

    <div class="main" id="geeks">
        <a href="#gfg">geeksforgeeks</a>
    </div>

    <div class="main" id="gfg">
        <a href="#geeks">GEEKSFORGEEKS</a>
        <p style="color:green;">
            A computer science portal for geeks.
         </p>
    </div>
</body>
</html>

Output:

css-scroll-behavior-property

Example: Trong ví dụ này, ta sử dụng thuộc tính scroll-behavior: auto;.

html 
<!DOCTYPE html>
<html>
<head>
    <title>
        CSS | scroll-behavior Property
    </title>
    <style>
        .g4g {
            font-size: 40px;
            font-weight: bold;
            color: green;
            text-align: center;
        }

        html {
            scroll-behavior: auto;
        }

        #geeks {
            height: 400px;
            background-color: coral;
        }

        #gfg {
            height: 400px;
            background-color: lightblue;
        }

        a {
            text-decoration: none;
            font-size: 25px;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div class="g4g">GeeksforGeeks</div>
    <h2 style="text-align:center;">
        scroll-behaviour:auto;
    </h2>

    <div class="main" id="geeks">
        <a href="#gfg">geeksforgeeks</a>
    </div>

    <div class="main" id="gfg">
        <a href="#geeks">GEEKSFORGEEKS</a>
        <p style="color:green;">
            A computer science portal for geeks.
        </p>
    </div>
</body>
</html>

Output: css-scroll-behavior-property

Supported Browsers: Các trình duyệt hỗ trợ scroll-behavior Property được liệt kê dưới đây:

  • Google Chrome 61.0
  • Edge 79.0
  • Firefox 36.0
  • Opera 48.0
  • Safari 15.4

Last Updated : 21/07/2025