几秒钟后自动切换

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); .you可以尝试它。

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>

​

Answer 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>

​