几秒后自动滚动到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>

- metalcoder

Answer 1

您可以像这样更改代码，.animate({'scrollTop'：$('#target').parent().offset().top}, 5000);。您可以尝试一下。

- allen

---

这个不行。当页面加载时，它已经在那个 div 上了。 :/ - metalcoder

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>
  Wait 5 seconds for automatic scroll up
</div>
<div id="bottom"></div>

- JorgeZ

Answer 3

我和你遇到了完全相同的问题。我发现我的问题是我先发布了自定义JS（其中包含我的滚动条），而不是在头部先发布jQuery。首先检查这个。确保你没有使用slim或slim.min版本的jQuery，因为这些文件不包括动画！顺便说一下，如果你想要，可以更改函数的名称。只需确保在下面的代码的所有三个位置中都进行更改（我的函数名为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
});

- livetocode

Answer 4

这是一个使用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>

- JorgeZ

---

谢谢！我只想滚动到一个div，而不是返回上一页。我应该只需删除 'pos = $('#target').offset(); $('html, body').delay(5000).animate({scrollTop: pos.top, scrollLeft: pos.left});' 并将 let pos = $('#bottom') 更改为 let pos = $('#target')，以使其按照我的意图工作吗？ - metalcoder

我想通了。我只是删掉了底部部分。 :) 这样做只会执行一次，还是需要添加removeClass来防止在用户滚动时再次运行？ - metalcoder

我尝试使用您的代码和我上面发布的代码来实现它，但它没有起作用。实际上，在页面加载时它位于预期DIV下方。 - metalcoder

你的HTML代码中，id为“target”的div已经在顶部了，所以浏览器会自然地将其显示在顶部。因此，我在开头添加了一个向下滚动的效果，让你可以看到它滚动到div#target的位置。 - JorgeZ

我给了你可用的代码示例，现在需要你动动脑筋将其调整以使其与你的HTML配合使用，通过实践学习。 - JorgeZ

这是我从这个网站记得的。谢谢提醒 :) - metalcoder