Set scroll view with intervals in JavaScript

For this, use the concept of scrollTop and scrollHeight.


 Live Demo

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<link rel="stylesheet" href="//">
<script src=""></script>
<script src=""></script>
<link rel="stylesheet" href="">
   #scrollDemo {
      height: 300px;
      overflow-y: scroll;
   #scrollDataFeatures {
      height: 500px;
      background-color: skyblue;
<div id="scrollDemo">
<div id="scrollDataFeatures"></div>
<h3>See the below Message and Scroll UP</h3>
   var scrollData = document.getElementById("scrollDemo");
   scrollData.scrollTop = scrollData.scrollHeight
   setInterval(() =>{
      var heading3Data = document.createElement("h3");
      heading3Data.innerHTML = "Scroll Down...Please Scroll UP"
      scrollData.scrollTop = scrollData.scrollHeight
   }, 30*1000)

To run the above program, save the file name anyName.html(index.html) and right click on the file and select the option open with live server in VSCode Editor.


This will produce the following output: Initially you will get the following output −

In every 30 seconds (30s), you will get the message like this −

Scroll Down...Please Scroll UP.


This will produce the following output −

Updated on: 14-Sep-2020


Kickstart Your Career

Get certified by completing the course

Get Started