JavaScript - Simple Automatic Page Scrolling

Submitted by razormist on Tuesday, July 16, 2019 - 17:50.
In this tutorial we will create a Simple Automatic Page Scrolling using JavaScript. This code can will immediately walk you to the target element when user click the button. The code use onmousedown() to initiate a function to auto scroll you to the targeted element by computing the distance between the target element. Feel free to modify and apply it in your system, this is a user-friendly kind of program We will be using JavaScript as a server-side scripting language because It gives a greater control of your web page and extend its capability in a modern way approach. It is written in HTML or as an external sourcing to add some necessary features in your website.

Getting started:

First you have to download bootstrap framework, this is the link for the bootstrap that I used for the layout design https://getbootstrap.com/.

The Main Interface

This code contains the interface of the application. To create this just write these block of code inside the text editor and save this as index.html.
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.         <head>
  4.                 <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" />
  5.                 <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
  6.         </head>
  8.         <nav class="navbar navbar-default">
  9.                 <div class="container-fluid">
  10.                         <a class="navbar-brand" href="https://sourcecodester.com">Sourcecodester</a>
  11.                 </div>
  12.         </nav>
  13.         <div class="col-md-3"></div>
  14.         <div class="col-md-6 well">
  15.                 <h3 class="text-primary" id="origin">JavaScript - Simple Automatic Page Scrolling</h3>
  16.                 <hr style="border-top:1px dotted #ccc;"/>
  17.                  <div class="col-md-4">
  18.                         <ul style="list-style-type:none;">
  19.                                 <h4>List of titles</h4>
  20.                                 <li><a href="#" onClick="return false;" onMouseDown="pageScroll('1');">Mr Sticky</a></li>
  21.                                 <li><a href="#" onClick="return false;" onMouseDown="pageScroll('2');">The Tidy Drawer</a></li>
  22.                                 <li><a href="#" onClick="return false;" onMouseDown="pageScroll('3');">Rapunzel</a></li>
  23.                         </ul>
  24.                 </div>
  25.                 <div class="col-md-8">
  26.                         <div id='1'>
  27.                                 <h3>Mr Sticky</h3>
  28.                                         <p>
  29.                                                  "He's very small," Mum said as she peered at the tiny water snail. "Just a black dot."
  30.  
  31.      "He'll grow," said Abby and pulled her pyjama bottoms up again before she got into bed. They were always falling down.
  32.  
  33.  
  34.  
  35. In the morning Abby jumped out of bed and switched on the light in her fish tank.
  36.  
  37.      Gerry, the fat orange goldfish, was dozing inside the stone archway. Jaws was already awake, swimming along the front of the tank with his white tail floating and twitching. It took Abby a while to find Mr. Sticky because he was clinging to the glass near the bottom, right next to the gravel.
  38.                                         </p>
  39.                                        
  40.                                         <a class="pull-right" href="#" onClick="return false;" onMouseDown="goBackTop('origin');">Go Back To Top</a>
  41.                                
  42.                         </div>
  43.                         <div id='2'>
  44.                                 <h3>The Tidy Drawer</h3>
  45.                                         <p>
  46.                                                 One Saturday morning Abby's Mum came upstairs to see Abby in her bedroom. Or tried to. There was so much mess on the floor she could only poke her head around the door. Abby sat in the middle of it all reading a book.
  47.  
  48.      "What a tip," Mum said. "You need to have a clear up in here."
  49.  
  50.      "Why?" Abby asked.
  51.  
  52.      "Why?" Mum repeated. "Because things get broken or lost when they're all willy-nilly like this. Come on, have a tidy up now."
  53.  
  54.      "But I'm very busy," Abby argued, "and it's boring on my own. Can't you help me?"
  55.  
  56.      "No I can't, I'm busy too. But I'll give you extra pocket money if you do a good job."
  57.                                         </p>
  58.                                        
  59.                                         <a class="pull-right" href="#" onClick="return false;" onMouseDown="goBackTop('origin');">Go Back To Top</a>
  60.                         </div>
  61.                         <div id='3'>
  62.                                 <h3>Rapunzel</h3>
  63.                                         <p>
  64.                                                 There were once a man and a woman who had long, in vain, wished for a child. At length it appeared that God was about to grant their desire.
  65.  
  66.      These people had a little window at the back of their house from which a splendid garden could be seen, which was full of the most beautiful flowers and herbs. It was, however, surrounded by a high wall, and no one dared to go into it because it belonged to an enchantress, who had great power and was dreaded by all the world.
  67.  
  68.      One day the woman was standing by this window and looking down into the garden, when she saw a bed which was planted with the most beautiful rampion, and it looked so fresh and green that she longed for it. She quite pined away, and began to look pale and miserable.
  69.                                         </p>
  70.                                        
  71.                                         <a class="pull-right" href="#" onClick="return false;" onMouseDown="goBackTop('origin');">Go Back To Top</a>
  72.                         </div>
  73.                 </div>
  74.         </div>
  75. <script src="js/script.js"></script>   
  76. </body>
  77. </html>

Creating the Script

This code contains the script of the application. This code will immediately auto scroll the user when the button is clicked. To do this just copy and write these block of codes inside the text editor, then save it as script.js inside the js folder.
  1. var posY = 0;
  2. var distance = 20;
  3. var speed = 10;
  4.  
  5.  
  6. function goBackTop(el){
  7.         var currentY = window.pageYOffset;
  8.         var targetY = document.getElementById(el).offsetTop
  9.         var animate = setTimeout('goBackTop(\''+el+'\')',5)
  10.         if(currentY > targetY){
  11.                 posY = currentY-distance;
  12.                 window.scroll(0, posY);
  13.         }else {
  14.                 clearTimeout(animate);
  15.         }
  16. }
  17.  
  18. function pageScroll(el){
  19.         var currentY = window.pageYOffset;
  20.         var targetY = document.getElementById(el).offsetTop
  21.         var bodyHeight = document.body.offsetHeight;
  22.         var yPos = currentY + window.innerHeight;
  23.         var animate = setTimeout('pageScroll(\''+el+'\')',speed);
  24.         if(yPos > bodyHeight){
  25.                 clearTimeout(animate);
  26.         }else{
  27.                 if(currentY < targetY-distance){
  28.                         posY = currentY+distance;
  29.                         window.scroll(0, posY);
  30.                 }else{
  31.                         clearTimeout(animate);
  32.                 }
  33.         }
  34. }
There you have it we successfully created a Simple Automatic Page Scrolling using JavaScript. I hope that this simple tutorial help you to what you are looking for. For more updates and tutorials just kindly visit this site. Enjoy Coding!
Tags
Javascript
AutoScroll
Bootstrap

Add new comment

About text formats
  • 75 views