幾秒鍾后自動滾動到 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
});