How to create a Scroll Back to Top button using CSS ?
Scrolling the webpage can be a tedious task especially when you are somewhere at the bottom of the page & the length is too long to again reach the top of the webpage. The user may sometimes escape to visit the page. For this, adding a scroll-back button can help to reach the initial position of the page.
Here, the button is initially hidden and becomes visible when the user scrolls down, offering the feature to quickly scroll back to the top of the page. Websites with lengthy text or pages often include a “Scroll to Top” button to enhance user experience by saving time and effort in scrolling back to the beginning.
Preview
Approach
The approach briefly illustrates the “Scroll Back to Top” button, primarily used for mobile devices where scrolling to the top might involve multiple swipes. It provides a one-tap solution for users, enhancing the overall mobile user experience.
- Make separate HTML, CSS, and JavaScript files. Then, integrate the external stylesheet and JavaScript file into the HTML document.
- The element <h1> defines the heading having CSS property (color: green). Set the property (color: green;) and (color: blueviolet;) to the element <h3>.
- For adding a scroll event listener to the window, the window.addEventListener(‘scroll’, function () {…}); is defined.
- Inside the event listener, Check if the vertical scroll position of the body (document.body.scrollTop) or the document’s root element (document.documentElement.scrollTop) is greater than 20 pixels.
- If true, set the display style of the “Scroll to Top” button to ‘block’; otherwise, set it to ‘none’.
Example: Creating a “scroll back to top” button using CSS.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content=" width = device -width, initial-scale = 1 .0"> < title >Scroll to Top</ title > < link rel = "stylesheet" href = "style.css" > </ head > < body > < h1 >w3wiki</ h1 > < h3 > How to create a "scroll back to top" button using CSS. </ h3 > < p > Linear data structure: Data structure in which data elements are arranged sequentially or linearly, where each element is attached to its previous and next adjacent elements, is called a linear data structure. Examples of linear data structures are array, stack, queue, linked list, etc. Static data structure: Static data structure has a fixed memory size. It is easier to access the elements in a static data structure. An example of this data structure is an array. Dynamic data structure: In dynamic data structure, the size is not fixed. It can be randomly updated during the runtime which may be considered efficient concerning the memory (space) complexity of the code. </ p > < a href = "#" class = "scrollbutton" id = "scrollbuttonid" > Scroll to Top </ a > < script src = "script.js" ></ script > </ body > </ html > |
CSS
/* style.css */ @import url ( 'https://fonts.googleapis.com/css2?family=Poppins&display=swap' ); body { height : 200 vh; background-color : rgb ( 200 , 233 , 200 ); font-family : 'Poppins' , sans-serif ; } h 1 { color : green ; text-align : center ; } h 3 { color : blueviolet; text-align : center ; } p { text-align : justify ; font-size : 30px ; } .scrollbutton { display : none ; position : fixed ; bottom : 30px ; right : 40% ; background-color : #1b5490 ; color : #e8e8e8 ; padding : 10px ; border-radius: 5px ; text-decoration : none ; font-size : 20px ; } .scrollbutton:hover { background-color : #2d6418 ; color : white ; font-size : 20px ; padding : 20px ; } |
Javascript
// script.js let mysBtn = document .getElementById( 'scrollbuttonid' ); window.addEventListener( 'scroll' , function () { if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { mysBtn.style.display = 'block' ; } else { mysBtn.style.display = 'none' ; } }); |
Output: