HTML - DOM Style Object scrollBehavior Property

Quiz

HTML DOM Style Object scrollBehavior property specifies smooth scroll effect instead of scolling instantly whene user clicks on a link within scrollable box.

Syntax

Set the scrollBehavior property

object.style.scrollBehavior= "auto | smooth | initial | inherit";

Get the scrollBehavior property

object.style.scrollBehavior;

Property Values

Value	Description
auto	It is the default value where scroll box scrolls instantly between elements.
smooth	It specifies smooth scroll effect between elements.
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return Value

It returns the current value of scroll behavior property for the selected element.

Example of HTML DOM Style Object 'scrollBehavior' Property

The following example explains scrollBehavior property using list and div element to scroll through different sections.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object right Property
    </title>
    <style>
        div {
            height: 700px;
            border: 2px solid #04af2f;
            }
        #section1 {
            background-color: rgb(202, 249, 249);
        }
        #section2 {
            background-color: rgb(241, 189, 238);
        }
        #section3 {
            background-color: rgb(248, 222, 161);
        }
    </style>
</head>
<body>
    <h3>
        Click on the links in list or links inside 
        three section before and after clicking on 
        'Change scoll Behavior' button to see change 
        in scroll effects using smooth scroll behavior
        property.
    </h3>
    <button onclick="fun()">Change scoll Behavior</button>    
    <br><br>
    <ul>
        <li>
            <a href="#section3">Jump to section 3</a>
        </li>
        <li>
            <a href="#section2">Jump to section 2</a>
        </li>
        <li>
            <a href="#section1">Jump to section 1</a>
        </li>
    </ul>
    <div id="section1">
        This is Section 1 
        <br>
        <a href="#section2">Jump to section 2</a>
        <br>
        <a href="#section3">Jump to section 3</a>
    </div>
    <div id="section2">
        This is Section 2
        <br>
        <a href="#section3">Jump to section 3</a>
        <br>
        <a href="#section1">Jump to section 1</a>
    </div>
    <div id="section3">
        This is Section 3
        <br>
        <a href="#section1">Jump to section 1</a>
        <br>
        <a href="#section2">Jump to section 2</a>
    </div>
    <script>
        function fun() {
            document.documentElement.style
                .scrollBehavior = "smooth";
        }   
    </script>
</body>
</html>

Supported Browsers

Property
scrollBehavior	Yes 61	Yes 79	Yes 36	Yes 15.4	Yes 48

html_dom.htm

Print Page