Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Learn how to create a "scroll back to top" button with CSS.

Try it Yourself »

How To Create a Scroll To Top Button

Step 1) Add HTML:

Create a button that will take the user to the top of the page when clicked on:

Example

Top

Step 2) Add CSS:

Style the button:

Example

myBtn {

display: none; /* Hidden by default */ position: fixed; /* Fixed/sticky position */ bottom: 20px; /* Place the button at the bottom of the page */ right: 30px; /* Place the button 30px from the right */ z-index: 99; /* Make sure it does not overlap */ border: none; /* Remove borders */ outline: none; /* Remove outline */ background-color: red; /* Set a background color */ color: white; /* Text color */ cursor: pointer; /* Add a mouse pointer on hover */ padding: 15px; /* Some padding */ border-radius: 10px; /* Rounded corners */ font-size: 18px; /* Increase font size */ }

myBtn:hover {

background-color:

555; /* Add a dark-grey background on hover */

}

Step 3) Add JavaScript:

Example

// Get the button: let mybutton = document.getElementById("myBtn");

// When the user scrolls down 20px from the top of the document, show the button window.onscroll = function() {scrollFunction()};

function scrollFunction() { if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { mybutton.style.display = "block"; } else { mybutton.style.display = "none"; } }

// When the user clicks on the button, scroll to the top of the document function topFunction() { document.body.scrollTop = 0; // For Safari document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera }

Try it Yourself »

★ +1

W3schools Pathfinder

Track your progress - it's free!

Everyday scrolling on long pages can be a tiring experience specially on those sites which provides infinite scrolling (like facebook, twitter, etc). You will keep scrolling using your mouse to see more and more updates and then when you want to go up to the top of the page, you might move your hand from your mouse to keyboard to search for Home key or you will drag the scroll bar to the top. Scroll To Top tries to minimize this effort by providing an intuitive icon at the bottom-right corner of each page so that with one click you will be at the top of the page with beautiful animation. No more searching for Home key on your keyboard and no more dragging of the scroll bar. It will be just fun and ergonomic to use it. GitHub Rep: https://github.com/pratikabu/scrolltotop Release notes: https://github.com/pratikabu/scrolltotop/releases

CatPadMar 10, 2024

Thanks, Chrome version works for Opera. Please Check Opera version as it doesn't work at all.

Elodie DominguesFeb 21, 2024

dont work

2 out of 2 people found this helpful

Pratik SoniDeveloperFeb 21, 2024

May I know where does it not work.

Belay MulatJan 4, 2024

exactly as I needed !

Details

• Version 5.1
• Updated April 12, 2024
• Size 312KiB
• Languages
• Developer
• Non-trader This developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.

Privacy

The developer has disclosed that it will not collect or use your data.

This developer declares that your data is

• Not being sold to third parties, outside of the approved use cases
• Not being used or transferred for purposes that are unrelated to the item's core functionality
• Not being used or transferred to determine creditworthiness or for lending purposes

Support

Related

Scrollbar of Contents

4.5(78)

Creates clickable heading markers next to the scrollbar.

Top and Bottom scroll buttons

4.5(38)

Adds scroll to Top and Bottom buttons on all sites

返回顶部Plus

4.1(45)

在每个页面加上返回顶部以及跳到底部按钮

Scroll to top

4.5(22)

Extension that make it so adding Scroll to top button when you start scroll to top. AKA: Pet Scroll.

Scroll To Top Button

4.5(464)

Scroll to top, bottom, or both. Click extension icon, on-page button, use context menu options, and/or keyboard shortcuts.

goodbye "Zenkaku" - さよなら全角英数

4.3(74)

ページ内のすべての全角英数文字を半角に置換します。あの電話会社のプレスリリースも、あの新聞社のニュースサイトも、キレることなく快適に閲覧できるでしょう。

Easy Scroll

3.9(28)

This brings you a comfortable reading experience with smooth scroll of necessary amount of webpage by pressing an assigned key.

Scroll Button

3.7(174)

Scroll to top or bottom of document using scroll button in a click. The button is draggable and resizable for easy positioning .

How do you scroll to the top of the page in Chrome?

Pressing Alt + Up arrow key takes you back to the top of the page.

Can you auto scroll on Chrome?

To auto scroll a webpage up and down, you can use the following steps: Open Chrome and navigate to the desired webpage. Right-click anywhere on the webpage and select “Inspect” from the dropdown menu. Under the “Elements” tab, find the scroll bar and right-click it.

How do I make my page auto scroll?

Here's how to do it in some popular applications:.

Google Chrome: Right-click on the page you want to auto-scroll and select "Inspect". ... .

Mozilla Firefox: Install an add-on called "AutoScroll". ... .

Adobe Acrobat Reader: Open the PDF document you want to auto-scroll and click on the "View" menu..

How do I change the scroll behavior in Chrome?

If your Google Chrome seems to be jerky or stuttering when scrolling, you can enable this feature. Open a new tab and type chrome://flags/

smooth-scrolling in the address bar, and press Enter. Click the dropdown box next to Smooth scrolling, and click Enabled. Click Relaunch on the bottom-right corner.