Autoscroll to div after a few seconds

user_17390712 0
Viewed 482

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 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>
html jquery javascript
4 Answers

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

user_72953970

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

user_53300180

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

user_53300180

I had the exact same problem as you. I found that my problem was that I posted my custom JS first (which is what my scroll was in) instead of jQuery first in my header. Check that first. Make sure you're not using the slim OR slim.min versions of jQuery as those files do not include animations! FYI you can change the name of the function if you'd like. Just make sure you change it in all three places in the code below (my function is named scrolltodiv).

The first number in the parenthesis is the speed of your animation. I have mine set at 2000 because I wanted it to go a bit slower. I wouldn't decrease that number too much as it can be jarring for users. The second number is the number of milliseconds (1 second = 1000 milliseconds). Google has a built in calculator if you search 'seconds to milliseconds.'

I'll go ahead and share the code that was given to me. I remember what it was like when I first started trying to learn jQuery (and JavaScript). I find it's much easier to code when you have exact examples and can reverse engineer them. Happy coding!

$(document).ready(function(scrolltodiv) {
    function scrolltodiv(){
            $('html, body').animate({
                scrollTop: $("#scrolldiv").offset().top
            }, 2000); //Speed of animation

    }


    window.setTimeout( scrolltodiv, 55000 ); //Time in milliseconds
});
user_179792420
Related