几秒钟后自动滚动到 div

Question

所以我试图让我正在处理的页面在页面加载大约一分钟后平滑滚动到 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>

Answer 1

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

Answer 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></div> <div id="bottom"></div>

Answer 3

这是 JQuery 的解决方案。

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

 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></div> <div id="bottom"></div>

Answer 4

我和你有完全相同的问题。 我发现我的问题是我首先在我的 header 中发布了我的自定义 JS（这是我的滚动所在的内容）而不是 jQuery。 先检查一下。 确保您没有使用 jQuery 的 slim 或 slim.min 版本，因为这些文件不包含动画。 仅供参考，如果您愿意，可以更改 function 的名称。 只要确保在下面的代码中的所有三个地方都进行了更改（我的 function 被命名为 scrolltodiv）。

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

我会提前 go 并分享给我的代码。 我记得当我第一次开始尝试学习 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
});