How To Scroll To A Specific Position of A Webpage in JavaScript
Here you are going to learn how to scroll to a specific position in JavaScript. That means I am going to show you how easily you can Scroll to specific position of a webpage using JavaScript.
In many cases, it is seen that we need to add a button on the webpage to jump to a specific position. So, In this post, I am also going to create a button to jump to a specific position of a webpage.
Create a smooth scroll to top button in jQuery
Scroll to Specific Position in JavaScript
In order to achieve our goal our easiest way is to apply:
window.scrollTo( value-x, value-y );
Here value-x is the pixel value of the width, where you wanna jump or scroll to.
value-y is for the height of the window in terms of the pixel where you wanna jump or scroll to.
Let’s just understand it with an example.
<script type="text/javascript"> function scrolling(){ window.scrollTo(0,500); } </script>
You may also read,
Get the scroll position of a web page in the browser window using JavaScript
How to Scroll To a Specific Position Smoothly Using JavaScript
This is the script and now I am going to use it on a webpage.
<!DOCTYPE html> <html> <head> <title>Scroll to a specific div element onclick using JavaScript</title> <style type="text/css"> body { width: 5000px; height: 5000px; } </style> </head> <body> <button onclick="scrolling();">Click Me</button> <p>Some Text</p> <p>Some Text</p> <p>Some Text</p> <p>Some Text</p> <p>Some Text</p> <p>Some Text</p> <p>Some Text</p> <p>Some Text</p> <p>Some Text</p> <p>Some Text</p> <p>Some Text</p> <p>Some Text</p> <p>Some Text</p> <p>Some Text</p> <p>Some Text</p> <p>Some Text</p> <p>Some Text</p> <p>Some Text</p> <script type="text/javascript"> function scrolling(){ window.scrollTo(0,500); } </script> </body> </html>
Now if you click on the button, it will scroll down the page to the 500 pixels of the webpage.
So you can use this to jump to a specific position of a webpage.
If you wanna scroll to the right side of your webpage just add some value to value-x.
window.scrollTo(500,0);
just like this one.
Leave a Reply