几秒钟后自动滚动到 div答案

【问题标题】：Autoscroll to div after a few seconds几秒钟后自动滚动到 div
【发布时间】：2022-01-12 00:52:08
【问题描述】：

所以我试图让我正在处理的页面在页面加载大约一分钟后平滑滚动到 div 中的标题（我知道这是 UX 中的一个大罪）。我想出了这个，但到目前为止，它还没有奏效。

jQuery

        $('body').delay(5000) 
        .animate({
          'scrollTop': $('#target').offset().top
        }, 5000); 
      });

HTML

<div class="container" >
 <div class="row" id="target">
            
            <div class="section-heading px-3 pl-4 pr-3 pt-md-5 pb-md-4 mx-auto text-center" >
              <h1 class="display-4" id="tap">Headline</h1>   
            </div>

            <div class="col-lg-4">
              <img class="rounded-circle" src="#" alt="image" width="173" height="173">
              <h2 class="value-heading">small heading</h2>
              <p class="value-description">info</p>      
            </div>
    
            <!-- /.col-lg-4 -->
            <div class="col-lg-4">
              <img class="rounded-circle" src="#" alt="image" width="173" height="173">
              <h2 class="value-heading">small heading</h2>
              <p class="value-description">info</p>
      
            </div>
            <!-- /.col-lg-4 -->
            <div class="col-lg-4">
              <img class="rounded-circle" src="#" alt="image" width="173" height="173">
              <h2 class="value-heading">small heading</h2>
              <p class="value-description">info</p>
      
            </div>
            <!-- /.col-lg-4 -->
          </div>
          <!-- /.row -->
    

</div>

【问题讨论】：

标签： javascript html jquery

【解决方案1】：

你可以这样改代码，.animate({ 'scrollTop': $('#target').parent().offset().top }, 5000); .你可以试试

【讨论】：

这不起作用。当页面加载时，它已经在那个 div 上。 ://

【解决方案2】：

这是一个纯 JavaScript 的解决方案。

let timeout = setTimeout(() => {
  document.querySelector('#target').scrollIntoView();
}, 5000);

(function() {
  document.querySelector('#bottom').scrollIntoView();
})();

html {
  font-family: sans-serif;
  scroll-behavior: smooth;
}

.height {
  height: 5rem;
}

.height > h1,
.height > h2 {
  margin: 0;
}

.height.gray {
 background-color: silver;
}

.height.red {
 background-color: red;
}

.height.green {
 background-color: green;
}

.height.blue {
 background-color: blue;
}

.height.yellow {
 background-color: yellow;
}

.height.gray {
 background-color: gray;
}

.height.brown {
 background-color: brown;
}

.height.orange {
 background-color: orange;
}

.height.lavender {
 background-color: lavender;
}

<div class="height gray"><h1>Main Header</h1></div>
<div class="height red" id="target"><h2>Header 1</h2></div>
<div class="height green"><h2>Header 2</h2></div>
<div class="height blue"><h2>Header 3</h2></div>
<div class="height yellow"><h2>Header 4</h2></div>
<div class="height red"><h2>Header 5</h2></div>
<div class="height green"><h2>Header 6</h2></div>
<div class="height blue"><h2>Header 7</h2></div>
<div class="height yellow"><h2>Header 8</h2></div>
<div class="height red"><h2>Header 9</h2></div>
<div class="height green"><h2>Header 10</h2></div>
<div class="height blue"><h2>Header 11</h2></div>
<div class="height yellow"><h2>Header 12</h2></div>
<div class="height red"><h2>Header 13</h2></div>
<div class="height green"><h2>Header 14</h2></div>
<div class="height blue"><h2>Header 15</h2></div>
<div class="height yellow"><h2>Header 16</h2></div>
<div class="height red"><h2>Header 17</h2></div>
<div class="height green"><h2>Header 18</h2></div>
<div class="height blue"><h2>Header 19</h2></div>
<div class="height yellow"><h2>Header 20</h2></div>
<div class="height red"><h2>Header 21</h2></div>
<div class="height green"><h2>Header 22</h2></div>
<div class="height blue"><h2>Header 23</h2></div>
<div class="height yellow">
  <h2>Header 24</h2>
  Wait 5 seconds for automatic scroll up
</div>
<div id="bottom"></div>

【讨论】：

【解决方案3】：

这是一个使用 JQuery 的解决方案。

$(document).ready(function() {
  let pos = $('#bottom').offset();
  $('html, body').animate({scrollTop: pos.top, scrollLeft: pos.left});

  pos = $('#target').offset();
  $('html, body').delay(5000).animate({scrollTop: pos.top, scrollLeft: pos.left});
    
/*
// Or you can use this other way instead of the delay function if you want to.
  let timeout = setTimeout(() => {
    let pos = $('#target').offset();
    $('html, body').animate({scrollTop: pos.top, scrollLeft: pos.left});
  }, 5000);
*/
});

html {
  font-family: sans-serif;
  scroll-behavior: smooth;
}

.height {
  height: 5rem;
}

.height > h1,
.height > h2 {
  margin: 0;
}

.height.gray {
 background-color: silver;
}

.height.red {
 background-color: red;
}

.height.green {
 background-color: green;
}

.height.blue {
 background-color: blue;
}

.height.yellow {
 background-color: yellow;
}

.height.gray {
 background-color: gray;
}

.height.brown {
 background-color: brown;
}

.height.orange {
 background-color: orange;
}

.height.lavender {
 background-color: lavender;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="height gray"><h1>Main Header</h1></div>
<div class="height red" id="target"><h2>Header 1</h2></div>
<div class="height green"><h2>Header 2</h2></div>
<div class="height blue"><h2>Header 3</h2></div>
<div class="height yellow"><h2>Header 4</h2></div>
<div class="height red"><h2>Header 5</h2></div>
<div class="height green"><h2>Header 6</h2></div>
<div class="height blue"><h2>Header 7</h2></div>
<div class="height yellow"><h2>Header 8</h2></div>
<div class="height red"><h2>Header 9</h2></div>
<div class="height green"><h2>Header 10</h2></div>
<div class="height blue"><h2>Header 11</h2></div>
<div class="height yellow"><h2>Header 12</h2></div>
<div class="height red"><h2>Header 13</h2></div>
<div class="height green"><h2>Header 14</h2></div>
<div class="height blue"><h2>Header 15</h2></div>
<div class="height yellow"><h2>Header 16</h2></div>
<div class="height red"><h2>Header 17</h2></div>
<div class="height green"><h2>Header 18</h2></div>
<div class="height blue"><h2>Header 19</h2></div>
<div class="height yellow"><h2>Header 20</h2></div>
<div class="height red"><h2>Header 21</h2></div>
<div class="height green"><h2>Header 22</h2></div>
<div class="height blue"><h2>Header 23</h2></div>
<div class="height yellow">
  <h2>Header 24</h2>
  Wait 5 seconds for automatic scroll up
</div>
<div id="bottom"></div>

【讨论】：

谢谢！我只是想滚动到一个 div 一次，而不是回去。我可以简单地删除 'pos = $('#target').offset(); $('html, body').delay(5000).animate({scrollTop: pos.top, scrollLeft: pos.left});'并将 let pos = $('#bottom') 更改为 let pos = $('#target') 以使其按我的意图工作？
我想通了。我刚刚删除了底部。 :) 这只会做一次还是我需要添加 removeClass 以防止它在用户滚动时再次运行？
我尝试使用您的代码和我上面发布的代码来实现这一点，但它不起作用。它实际上位于页面加载时预期的 DIV 下方。
你的HTML设置方式id="target"的div已经在顶部了，所以浏览器当然会显示在顶部，所以我在开头加了一个向下滚动让你看到它滚动到 div#target。
我给了你代码示例，你可以使用你的大脑肌肉来调整它以使其与你的 HTML 一起工作，边做边学。

【解决方案4】：

我遇到了和你一样的问题。我发现我的问题是我首先在我的标题中发布了我的自定义 JS（这是我的滚动所在）而不是 jQuery。先检查一下。确保您没有使用 jQuery 的 slim 或 slim.min 版本，因为这些文件不包含动画！仅供参考，您可以根据需要更改函数的名称。只需确保在下面代码中的所有三个位置都进行了更改（我的函数名为 scrolltodiv）。

括号中的第一个数字是动画的速度。我将我的设置为 2000，因为我希望它走得慢一点。我不会过多地减少这个数字，因为它可能会让用户感到不安。第二个数字是毫秒数（1 秒 = 1000 毫秒）。如果您搜索“秒到毫秒”，Google 会内置一个计算器。

我会继续分享给我的代码。我记得当我第一次开始尝试学习 jQuery（和 JavaScript）时的感觉。我发现当你有确切的例子并且可以对它们进行逆向工程时，编码会容易得多。编码愉快！

$(document).ready(function(scrolltodiv) {
    function scrolltodiv(){
            $('html, body').animate({
                scrollTop: $("#scrolldiv").offset().top
            }, 2000); //Speed of animation

    }


    window.setTimeout( scrolltodiv, 55000 ); //Time in milliseconds
});

【讨论】：