Article

Automatic Scroll

https://cdn.jsdelivr.net/npm/[email protected]/dist/js.cookie.min.js
Copy to clipboard

In this example we press an scroll button to automatically scroll down our list https://raw.githubusercontent.com/finsweet/jqueryCourse/main/jquery%20events/ex37.js?actionable=true The animate function is used to animate() the scroll movement. We add the scrollTop and value $('#color-list').prop("scrollHeight") to describe animation limits to the height of our list.

<script>
$(document).ready(function(){
  XT1
});
</script>
Copy to clipboard
Send to Live Demo

Live demo

<style>#color-list{max-height: 120px;    overflow-y: scroll;}</style><div id="minidivpage" class="example-live"><h4 class="heading-4">Scroll this list:</h4><ul id="color-list" role="list" class="list"><li>Purple</li><li>Blue</li><li>Magenta</li><li>Pink</li><li>Black</li><li>Red</li><li>Green</li></ul><div id="position" class="box">This is some text inside of a div block.</div><a href="#" class="button-3 w-button demo-button">Scroll</a></div>

<script>    
$(document).ready(function() {
  XT1
});
</script>
<script>
  
</script>
Copy to clipboard
Press the Run Demo button to execute the scripts above.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Your browser is too small

Resize your browser to be at least 769px wide.