Autoscroll to div after a few seconds-CodePudding

So I am trying to get the page I am working on to smooth scroll to a headline in a div after about a minute on page load (I know this is a cardinal sin in UX). I came up with this but so far, it hasn't worked.

jQuery

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

HTML

<div  >
 <div  id="target">
            
            <div  >
              <h1  id="tap">Headline</h1>   
            </div>

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

</div>

CodePudding user response：

you can change code like this, .animate({ 'scrollTop': $('#target').parent().offset().top }, 5000); .you can try it

CodePudding user response：

This is a solution in plain 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 ><h1>Main Header</h1></div>
<div  id="target"><h2>Header 1</h2></div>
<div ><h2>Header 2</h2></div>
<div ><h2>Header 3</h2></div>
<div ><h2>Header 4</h2></div>
<div ><h2>Header 5</h2></div>
<div ><h2>Header 6</h2></div>
<div ><h2>Header 7</h2></div>
<div ><h2>Header 8</h2></div>
<div ><h2>Header 9</h2></div>
<div ><h2>Header 10</h2></div>
<div ><h2>Header 11</h2></div>
<div ><h2>Header 12</h2></div>
<div ><h2>Header 13</h2></div>
<div ><h2>Header 14</h2></div>
<div ><h2>Header 15</h2></div>
<div ><h2>Header 16</h2></div>
<div ><h2>Header 17</h2></div>
<div ><h2>Header 18</h2></div>
<div ><h2>Header 19</h2></div>
<div ><h2>Header 20</h2></div>
<div ><h2>Header 21</h2></div>
<div ><h2>Header 22</h2></div>
<div ><h2>Header 23</h2></div>
<div >
  <h2>Header 24</h2>
  Wait 5 seconds for automatic scroll up
</div>
<div id="bottom"></div>

CodePudding user response：

This is a solution with 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 ><h1>Main Header</h1></div>
<div  id="target"><h2>Header 1</h2></div>
<div ><h2>Header 2</h2></div>
<div ><h2>Header 3</h2></div>
<div ><h2>Header 4</h2></div>
<div ><h2>Header 5</h2></div>
<div ><h2>Header 6</h2></div>
<div ><h2>Header 7</h2></div>
<div ><h2>Header 8</h2></div>
<div ><h2>Header 9</h2></div>
<div ><h2>Header 10</h2></div>
<div ><h2>Header 11</h2></div>
<div ><h2>Header 12</h2></div>
<div ><h2>Header 13</h2></div>
<div ><h2>Header 14</h2></div>
<div ><h2>Header 15</h2></div>
<div ><h2>Header 16</h2></div>
<div ><h2>Header 17</h2></div>
<div ><h2>Header 18</h2></div>
<div ><h2>Header 19</h2></div>
<div ><h2>Header 20</h2></div>
<div ><h2>Header 21</h2></div>
<div ><h2>Header 22</h2></div>
<div ><h2>Header 23</h2></div>
<div >
  <h2>Header 24</h2>
  Wait 5 seconds for automatic scroll up
</div>
<div id="bottom"></div>