如何使用jQuery自动滚动到页面底部?

这个

$(document).scrollTop($(document).height());

<!DOCTYPE html>
<html>
  
<head>
    <title>Scroll Automatically</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
  
    <!-- jQuery code to show the working of this method -->
    <script>
        $(document).ready(function() {
            $("button").click(function() {
                $(document).scrollTop($(document).height());
            });
        });
    </script>
    <style>
        h1 {
            color: green;
        }
    </style>
</head>
  
<body>
    <center>
        <div>
            <!-- click on this button
              and see the change -->
            <button>Click Here!</button>
            <h1>GeeksforGeeks</h1>
            <h1>GeeksforGeeks</h1>
            <h1>GeeksforGeeks</h1>
            <h1>GeeksforGeeks</h1>
            <h1>GeeksforGeeks</h1>
            <h1>GeeksforGeeks</h1>
            <h1>GeeksforGeeks</h1>
            <h1>GeeksforGeeks</h1>
            <h1>GeeksforGeeks</h1>
            <h1>GeeksforGeeks</h1>
            <h1>GeeksforGeeks</h1>
            <h1>GeeksforGeeks</h1>
        </div>
    </center>
</body>
  
</html>

加载完自动滚到底部

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title></title>
        <style>
            #my-list {
              height: 200px;
              overflow-y: auto;
            }


        </style>
    </head>
    <body>
        <ul id="my-list">
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 6</li>
          <li>Item 7</li>
          <li>Item 8</li>
          <li>Item 9</li>
          <li>Item 10</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 6</li>
          <li>Item 7</li>
          <li>Item 8</li>
          <li>Item 9</li>
          <li>Item 10</li>
        </ul>

        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script>
            $(document).ready(function() {
              // 计算滚动条的位置
              var scrollHeight = $('#my-list')[0].scrollHeight;
              var height = $('#my-list').height();
              var scrollPosition = scrollHeight - height;
              console.log(scrollPosition)
              // 将滚动条设置到底部
              $('#my-list').scrollTop(scrollPosition);
            });


        </script>
    </body>
</html>

完整案例：

HTML代码：

<ul id="my-list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
</ul>

<button id="add-item">添加项目</button>

CSS代码：

#my-list {
  height: 200px;
  overflow-y: auto;
}

JQuery代码：

$(document).ready(function() {
  // 将滚动条设置到底部
  function scrollToBottom() {
    var scrollHeight = $('#my-list')[0].scrollHeight;
    var height = $('#my-list').height();
    var scrollPosition = scrollHeight - height;
    $('#my-list').scrollTop(scrollPosition);
  }
  
  // 初始化页面时滚动到底部
  scrollToBottom();
  
  // 点击按钮添加新项目
  $('#add-item').click(function() {
    // 在列表末尾添加新项目
    $('#my-list').append('<li>Item 10</li>');
    // 将滚动条滚动到底部
    scrollToBottom();
  });
});

我们定义了一个scrollToBottom()函数，该函数将滚动条滚动到列表的底部。在页面加载完毕后，我们调用scrollToBottom()函数，将滚动条滚动到底部。当用户点击"添加项目"按钮时，我们向列表末尾添加一个新项目，然后再次调用scrollToBottom()函数，将滚动条滚动到底部，以确保新添加的项目可见。

posted @ 2023-02-27 18:02 漫漫长路</> 阅读(1328) 评论(0) 收藏举报

刷新页面返回顶部

漫漫长路

如何使用jQuery自动滚动到页面底部?

公告