JavaScript scrollIntoView

JavaScript scrollIntoView () 是 Element 类的一个方法，它允许我们将一个元素滚动到窗口的可视部分。

在这里，我们将学习如何使用 scrollIntoView () 方法将元素滚动到可视区域。我们还将通过一个示例来理解该函数的工作原理和用法。

JavaScript scrollIntoView () 方法

scrollIntoView () 方法用于在视口上滚动元素。

语法：

1) element.scrollIntoView (alignToTop);
2) Element.scrollIntoView (options);

在上述语法中，指定的参数如下：

alignToTop： 参数alignToTop包含一个布尔值，可以是true或false，默认情况下，其值为true。对于特定的代码，如果该参数为true，则元素的顶部将对准可见区域的顶部或视口区域的顶部。然而，如果值为false，则元素的底部将对准视口的底部或滚动条可见区域的底部。
options： 这是一个对象类型的参数，浏览器支持可能不同。此参数在元素在视图中的对齐方面提供更多控制。 它有以下属性：
- 第一个属性是 behavior ，定义过渡动画。该属性可以有两个值之一，即 auto 或 smooth ，其中默认值为 auto 。
- block 属性是另一个定义元素垂直对齐的属性，可以有四个值之一，即 start, center, end 或 nearest 。此处，默认值为 start 。
- 最后一个属性是 inline 属性，它定义了水平对齐方式，可以有四个值之一，即 start, center, end 或 nearest 。此处，默认值为 nearest 。

现在，让我们来看一个scrollIntoView()方法的示例。

JavaScript scrollIntoView() 示例

让我们来看一个示例，了解scrollIntoView()方法的工作方式： JavaScript scrollIntoView ()方法：

<!DOCTYPE html>
<html>
<body>
  <button onclick="funcClick()">Click it</button>
    <div>
      <p>JavaTpoint: The Best Learning Portal</p>
      <ul>
      <li><b>JavaScript</b></li>
      <li><b>Java</b></li>
      <li><b>PHP</b></li>
      <li><b>C</b></li>
      <li><b>C++</b></li>
      <li><b>Python</b></li>
      <li><b>R</b></li>
      <li><b>GO</b></li>
      <li><b>DOT NET</b></li>
      <li id="id_test"><b>Angular</b></li>
      <li><b>Django</b></li>
      <li><b>HTML</b></li>
      <li><b>CSS</b></li>
      <li><b>Bootstrap</b></li>
      <li><b>C#</b></li>
      <li><b>Android</b></li>
      <li><b>SQL</b></li>
      <li><b>DBMS</b></li>
      <li><b>Data Structure</b></li>
      <li><b>RPA</b></li>
      <li><b>PostgreSQL</b></li>
      <li><b>Artificial Intelligence</b></li>
      <li><b>Machine Learning</b></li>
      <li><b>AWS</b></li>
      <li><b>Data Science</b></li>
      <li><b>Blockchain</b></li>
      <li><b>Git</b></li>
      <li><b>DevOps</b></li>
      <li><b>ReactJS</b></li>
      <li><b>Hadoop</b></li>
      <li><b>Cloud</b></li>
      <li><b>Data Mining</b></li>
      <li><b>Oracle</b></li>
      <li><b>MYSQL</b></li>
      <li><b>SQLite</b></li>
      <li><b>jQuery</b></li>
      <li><b>Node js</b></li>
      <li><b>JSON</b></li>
      <li><b>Laravel</b></li>
      <li><b>Wordpress</b></li>
      <li><b>JSP</b></li>
      <li><b>JSF</b></li>
      <li><b>Spring Boot</b></li>
      <li><b>Rest API</b></li>
      <li><b>MicroServices</b></li>
      <li><b>IntelliJ</b></li>
      <li><b>Apache Kafka</b></li>
      <li><b>Cassandra</b></li>
      <li><b>Selenium</b></li>
      <li><b>SO on...</b></li>

    </ul>
  </div>
<script>
    function funcClick()
    {
      var e = document.getElementById("id_test");
      e.scrollIntoView();
    }
  </script>
</body>
</html>