Scroll to Top Using window.scrollY Property Last Updated : 18 Apr, 2025 Summarize Comments Improve Suggest changes Share Like Article Like Report A Scroll to top button is used to Scroll to the top of the page whenever we are at the end or middle of the page and we want to reach the top of the page directly. In this article, we are going to make a Scroll To Top Button.Before starting we need Font Awesome icon for the Up arrow. To get this we will use the font awesome CDN link. The link is given below you can copy and paste it into the head tag inside the HTML file.CDN Link:https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css Functionalities we want:Initially, the scroll button should hide.Whenever we scroll the current page, in the bottom right corner a button should appear.After clicking on the button, the page automatically scrolls to the top of the page.Here is the preview of the feature we are going to make.Preview ImageProject Structure- index.html- style.css- script.jsExample: Add all the below code to the respective files you will see the output in the browser.HTML Code: We have used a container div and inside that we have used random text and used the ArrowUp icon from the fontawesome CDN link.CSS Code: Used normal styling to style the text and attached the ArrowUp icon to the bottom right.JavaScript Code: Initially, the ArrowUp will hide and whenever the user scrolls the screen the icon will be visible, and the scrollToTop() function will trigger whenever the icon will be clicked. HTML <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> <!-- CDN LINK --> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <title>Document</title> </head> <body> <div class="container"> <button id="scrollToTopBtn" onclick="scrollToTop()"> <i class="fa-solid fa-arrow-up fa-beat fa-lg" style="color: #ffffff;"> </i> </button> <div class="content-div"> <div class="heading"> Scroll Down to see the effect </div> <div class="description"> GeeksforGeeks is the best Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles. GeeksforGeeks offers Free Tutorials, Millions of Articles, Live, Online and Classroom Courses,Frequent Coding Competitions, Webinars by Industry Experts, Internship opportunities and Job Opportunities. </div> </div> </div> <script src="script.js"></script> </body> </html> CSS * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: rgb(239, 238, 238); } .heading { background-color: rgb(51, 88, 38); color: white; padding: 30px; font-size: 2rem; font-weight: 900; text-transform: uppercase; } #scrollToTopBtn { position: fixed; width: 2.5rem; height: 2.5rem; bottom: 2rem; right: 2rem; z-index: 10; font-size: 1rem; background-color: rgb(255, 0, 0); border: none; cursor: pointer; border-radius: 50%; opacity: 0.8; transition: opacity 0.3s, transform 0.3s; } #scrollToTopBtn:hover { opacity: 1; transform: scale(1.1); } .description { height: 2500px; margin: 2rem; } JavaScript window.onscroll = function () { scrollFunction(); }; function scrollFunction() { if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { document.getElementById("scrollToTopBtn").style.display = "block"; } else { document.getElementById("scrollToTopBtn").style.display = "none"; } } function scrollToTop() { const scrollDuration = 500; // Duration in milliseconds const scrollStep = -window.scrollY / (scrollDuration / 15); const scrollInterval = setInterval(function () { if (window.scrollY !== 0) { window.scrollBy(0, scrollStep); } else { clearInterval(scrollInterval); } }, 15); } Output: Comment More infoAdvertise with us Next Article How to scroll window using jQuery ? R rahulkwh Follow Improve Article Tags : JavaScript Web Technologies Similar Reads How to scroll window using jQuery ? Given a HTML document and the task is to scroll the document with the help of jQuery. There are two methods to scroll the HTML document window which are discussed below: Approach: Select the document by using selector. Use either of the scrollTop() or scrollTo() method to move the document to that p 2 min read HTML DOM Window scrollY Property The scrollY property of the Window interface returns the number of pixels that the document is currently scrolled vertically in the current window. This value is subpixel precise in modern browsers, meaning that it isn't necessarily a whole number. This is a read-only property. Syntax: var Scry = wi 1 min read How to display scroll update when scrolling down the page using jQuery ? In this article, we will learn to show scroll updates when scrolling down on a webpage. The scroll() event handler can be used to detect any scrolling in the page, but we only need to detect the scrolling down. The scroll down event can be handled using the scroll() and scrollTop() events.HTML DOM W 2 min read HTML DOM Window scrollX property The scrollX property of the Window interface returns the number of pixels that the document is currently scrolled horizontally in the current window. This value is subpixel precise in modern browsers, meaning that it isn't necessarily a whole number. This is a read-only property. Syntax: var Scrx = 1 min read How to scroll to specific element using jQuery ? Many times, in our website we want to scroll automatically to a section of the webpage when we click on a button or a heading in a navbar or a list. So, to achieve this automatic scrolling to the required element, we need to take the help of jQuery. Using jQuery, we can achieve this in a very simple 3 min read HTML DOM Window screenTop Property The Window screenTop property is used for returning the 'y' or vertical coordinate of a window relative to a screen. It returns a number which represents the vertical coordinate of a window relative to a screen.Syntax: window.screenTop Return Value: It returns a number that represents the window hor 2 min read Like