Introduction to JavaScript Scroll to Top
While coding for the client-side, there occurs a situation when we have to scroll the current window or element as its length exceeds the display window. In such cases, javascript can be used to manipulate and handle the scrolling of the window or element. In this tutorial, we will learn how we can scroll back to the top of the window using javascript. This situation often arises when the user has come to the end of the page and now he wants to return to the top. Here, we can provide a button on click of which he will be taken back to the top of the page or window.
This can also be done on an elementary basis. Suppose, We have a single-page website that contains multiple sections on the same page such as introduction, features, benefits, current clients engaged to them, mission and vision, etc. After the user reaches the end of the page, he/she should be able to navigate to the element of the section which he wishes to. This can be achieved similarly, by providing buttons for each section. Let us begin with our first basic thing which is the function and its syntax.
Window.scrollTo()
Window.scrollTo() method is used to scroll to a specified position or location with the help of x and y coordinates mentioned as its parameters which are taken as pixels and on the execution of scrollTo() method the user is navigated to that particular location. Now, if we want to scroll to the top of the page, then what we can do is simply mention x and y coordinates of scrollTo() parameters as zero. This will lead to navigation to the topmost and leftmost point of the page when the method will be executed. That is by default the initial location is upper left position of the page.
Alternatively, we can also mention the scroll options as a parameter to the scrollTo() method which represents the position and also whether the scrolling should be smooth or not.
Syntax
Below is the syntax in Scroll to Top javascript:
window.scrollTo(x-coordinate, y-coordinate)- x-coordinate: It represents a pixel on the document along the horizontal axis that is x-axis to which we want to navigate or scroll to in an upper left position.
- y-coordinate: It represents a pixel on the document along the vertical axis that is y-axis to which we want to navigate or scroll to in an upper-left.
or
window.scrollTo(scrollOptions);scrollOptions: It is a ScrollToOptions dictionary parameter. It has three properties which are as follows –
- ScrollToOptions.top: It represents the number of pixels that we want to scroll to along the y-axis i.e vertically.
- ScrollToOptions.left: It represents the number of pixels that we want to scroll to along the x-axis i.e horizontally.
- ScrollToOptions.behavior: It represents whether the scroll animation should be smooth ar it should navigate instantly to the location specified.
Examples of JavaScript Scroll to Top
Below are the examples of javascript scroll to top for the same:
Example #1
Simple Example of the scrollTo() method
Code:
<!DOCTYPE html>
<html>
<head>
<style>
.scroll {
height: 1000px; background-color: pink;
}
</style>
</head>
<body>
<h1 style="color: red"> Javascript Coders Are Best
</h1>
<b>Demonstration of scrolling to the top of the page in javascript</b>
<p>You can click on the button placed at the bottom of the pge to return to the top of the page</p>
<p class="scroll">Javascript is a multiple-paradigm programming language that can be used according to our convenience and requirements.It has extensive libraries.</p>
<button onclick="getBackToBeginning()"> Click here to go back to the top of the page
</button>
<script>
function getBackToBeginning() { window.scrollTo(0, 0);
}
</script>
</body>
</html>Output:
Before clicking on the button the top of the page and bottom is –
After clicking on “Click here to go back to the top of the page ” button, we are navigated to the top of the page and output is as follows –
Example #2
Now, we will see an example that will use scrollOptions to mention the animation effect while navigating on scrollTo(). Here, we will move to the description element instead of the top of the page so that you will get to know how scrollTo() with provided non-zero parameters work and how we can navigate the user to any particular location on the window.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
.scroll {
height: 1000px; background-color: pink;
}
</style>
</head>
<body>
<h1 style="color: red"> Javascript Coders Are Best
</h1>
<b>Demonstration of scrolling to the particular position of the page along with smooth animation effect to scroll in javascript</b>
<p>You can click on the button placed at the bottom of the page to return to the description mentioned here</p>
<p class="scroll">Javascript is a multiple-paradigm programming language that can be used according to our convenience and requirements.It has extensive libraries.</p>
<button onclick="getBackToDescription()"> Click here to go back to the description
</button>
<script>
function getBackToDescription() { window.scrollTo({
top: 115,
left: 115, behavior: 'smooth'
}); }
</script>
</body>
</html>Output:
The output of the above code is as follows in the beginning and ending as we scroll –
After clicking on the “Click here to go back to the description ” button at the bottom, we are navigated to the description line because this is located at 115 pixels from the top and left of the window. Here’s where we reach after clicking the bottom button.
Conclusion
In this way, we can use the scrollTo() method of window interface of DOM to navigate the user to any particular location on the page on some event. If we want to move the user to the top, simply specify the two co-ordinate values as zero. We can even use scrollOptions to animate the effect. But be sure to check the compatibility.
