How To Scroll To A Specific Position of A Webpage in JavaScript
By Saruque Ahamed MollickHere 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