Scroll To Top Button

Scroll-to-top Button in vanilla JS (Beginners)

Scroll to top button is a very common UX feature in websites. It’s goal is to prevent annoying users forced to scroll back up — especially on mobile devices. In this short tutorial, we’ll see how to implement one with css and pure (vanilla) javascript. The simplest way to get a scroll to top button is to have an html element at the top and a link near the end of your page that calls it:

html  scroll-behavior: "smooth"; > 

That’s the easiest way to get a scroll to top (I’ve actually missed this on my original post as Loouis Low pointed out in the comments.) Result here: No javascript needed!

Scroll to top button with vanilla js

• Show button after the user has scrolled down x % of the page.
• Animate entrance and leave.

The button

Let’s just created a simple button with a class of scrollToTopBtn so we can refer to it in js.

Here are a few CSS properties for the button:

• position: fixed; gets it out of the flow of the page.
• bottom: 50px; and right: 50px; places it at the bottom right corner.
• z-index: 100; a large z-index keeps the button on top of every other elements.
• display: none; is used to hide it at first.

Detect user scroll

we can detect user’s scroll with a scroll event listener:

document.addEventListener("scroll", handleScroll); function handleScroll()  // do something on scroll > 

Show the Scroll to Top button logic

In the handleScroll function, we’ll check whether we need to show or hide the button. We are going to use three element properties:

• clientHeight gives us the visible part of an element in its parent.
• scrollHeight gives the total height of an element including the overflow part.

The height of the overflow part is the total amount of pixels that can be scrolled. In other words: scrollableHeight = scrollHeight — clientHeight

var scrollableHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight; 

document.documentElement is the document element. We are using it instead of document because scrollHeight and clientHeight are elements’ properties.

• scrollTop gives the number of pixels scrolled from the top. It’s the amount of pixels scrolled by the user.

By dividing scrollTop with scrollableHeight we get a ratio between 0 and 1. 0 meaning the user hasn’t scrolled and 1 meaning the user scrolled to the end of the page. This ratio tells us how much the user scrolled.

If we want the scroll to top button to show up after the user scrolled 50% we set a golden ratio of 0.5. And, with an if else statement, make the button visible above and hidden below.

document.addEventListener("scroll", handleScroll); // get a reference to the button var scrollToTopBtn = document.querySelector(".scrollToTopBtn"); function handleScroll()  var scrollableHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight; var GOLDEN_RATIO = 0.5; if ((document.documentElement.scrollTop / scrollableHeight ) > GOLDEN_RATIO)  //show button scrollToTopBtn.style.display = "block"; > else  //hide button scrollToTopBtn.style.display = "none"; > > 

With that the scroll-to-top button appears and hides on scroll.

Scroll to top

There a lot of scrolling examples that use jQuery. But these days it is really easy to do this in pure js with scrollTo:

\\. scrollToTopBtn.addEventListener("click", scrollToTop); function scrollToTop()  window.scrollTo( top: 0, behavior: "smooth" >); > 

• top: 0, means scroll to 0px vertically.
• behavior: «smooth» makes the scroll smooth.
• there’s also a left property for horizontal scroll.

And that’s it! Here’s the final js:

document.addEventListener("scroll", handleScroll); // get a reference to our predefined button var scrollToTopBtn = document.querySelector(".scrollToTopBtn"); function handleScroll()  var scrollableHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight; var GOLDEN_RATIO = 0.5; if ((document.documentElement.scrollTop / scrollableHeight ) > GOLDEN_RATIO)  //show button scrollToTopBtn.style.display = "block"; > else  //hide button scrollToTopBtn.style.display = "none"; > > scrollToTopBtn.addEventListener("click", scrollToTop); function scrollToTop()  window.scrollTo( top: 0, behavior: "smooth" >); > 

Tada 🎉🎉🎉!

Thanks for reading 🥰🥰!! I hope this was of help.

Improvements:

I’ve tried to keep it simple. Usually I would also toggle a class instead of the display to show a transition animation.

Here’s how you could fade up the button:

Источник

Scroll To Top Button Using only HTML and CSS

In this article, we Create Scroll To Top Button Using Css. We Create A button that scrolls to the top of the page When we Bottom Of the Page. We Create 3 to 4 Paragraph Of 100 Word Using Html and Then Create Scroll To Top Button Using CSS.

It’s needed when you long content on the page and you don’t want that your user closes your tab because who scrolls a lot, so this is a button that takes your user to the top of your page or any section where you want.

So in this project, we use only html and css to scroll to top. No framework or javascript only html css with basis code. So let’s start writing our html code for this scroll to top project.

HTML Code For Scroll To Top

        
 
Main Title
 
Bear claw gummi bears danish ice cream halvah cotton candy pastry chocolate bar. Croissant cotton candy cotton candy jelly beans shortbread cheesecake sugar plum. Marshmallow brownie liquorice jelly carrot cake bonbon jelly-o ice cream. Sweet roll cupcake tootsie roll candy sugar plum gingerbread pastry. Halvah carrot cake lemon drops cake marshmallow gingerbread pie sesame snaps. Cheesecake lemon drops muffin sweet wafer chupa chups. Pudding gummi bears cupcake powder chocolate bar cupcake. Sesame snaps macaroon candy jelly ice cream sweet muffin wafer carrot cake.
 
Secondary title
 
Croissant tiramisu candy canes danish dragée lemon drops. Tart dessert dragée fruitcake bear claw danish gingerbread. Croissant gingerbread chocolate cake apple pie sweet roll cotton candy. Jelly jelly icing toffee cotton candy. Soufflé tart sweet roll chocolate sesame snaps fruitcake carrot cake. Wafer biscuit cotton candy sweet icing. Sesame snaps sesame snaps gummi bears topping macaroon liquorice. Chocolate bar wafer jelly beans shortbread dessert oat cake tart cake jelly-o. Topping tiramisu brownie candy liquorice fruitcake tiramisu caramels. Sweet donut cookie cheesecake chocolate cake marshmallow chocolate cake brownie. Gummi bears sugar plum sugar plum chocolate bar dragée pie gummies. Sweet candy canes icing macaroon cookie pie jujubes sugar plum. Cake fruitcake pastry muffin sweet roll bear claw. Topping pudding bonbon pudding cookie marshmallow.
 
Secondary title
 
Croissant tiramisu candy canes danish dragée lemon drops. Tart dessert dragée fruitcake bear claw danish gingerbread. Croissant gingerbread chocolate cake apple pie sweet roll cotton candy. Jelly jelly icing toffee cotton candy. Soufflé tart sweet roll chocolate sesame snaps fruitcake carrot cake. Wafer biscuit cotton candy sweet icing. Sesame snaps sesame snaps gummi bears topping macaroon liquorice. Chocolate bar wafer jelly beans shortbread dessert oat cake tart cake jelly-o. Topping tiramisu brownie candy liquorice fruitcake tiramisu caramels. Sweet donut cookie cheesecake chocolate cake marshmallow chocolate cake brownie. Gummi bears sugar plum sugar plum chocolate bar dragée pie gummies. Sweet candy canes icing macaroon cookie pie jujubes sugar plum. Cake fruitcake pastry muffin sweet roll bear claw. Topping pudding bonbon pudding cookie marshmallow.
 
 Back to Top  

So this is our Html code, this is very long but we create only some Paragraph text sections so we have to get scroll bar Content and at the end of html code we add a ahref link that we use as a button in this project to scroll to top using the link.

Do you want to learn HTML to JavaScript? 🔥

If yes, then here is our Master Frontend: Zero to Hero eBook! 📚 In this eBook, you’ll learn complete HTML, CSS, Bootstrap, and JavaScript from beginner to advance level. 💪 It includes 450 Projects with source code.

Only Html Code Output

Here is the output with only html code, then we write css for styling the link to the button and Give Functionality of scroll to the top.

CSS Code For Scroll To Top

body < display: grid; grid-template-columns: 1fr 0px; font-family: system-ui, sans-serif; background: #eee; >.top < --offset: 100px; /* control when the button appear */ position: sticky; bottom: 20px; margin-right: 10px; place-self: end; margin-top: calc(100vh + var(--offset)); width: 60px; aspect-ratio: 1; background: #ff8b24; border-radius: 10px; font-size: 0; >.top:before < content: ""; position: absolute; inset: 30%; transform: translateY(20%) rotate(-45deg); border-top: 5px solid #fff; border-right: 5px solid #fff; >h1 < font-size: 3rem; >p < font-size: 1.5rem; text-align:justify; >body > div < margin-inline: max(3px,50% - 800px/2); >/* remove the below if you don’t want smooth scrolling */ html, body

This is our short css code for Scroll to Top button and now it’s working perfectly. We use a grid system to align our html content and style a Link to the button. Now Our Button Ready To Scroll to Top Of Page.

Final Output For Scroll To Top Button

This is the video for this project preview. You can see when we on home page (main page) scroll to top button not visible but when we little bit scroll there’s a button and when we click on this button we automatically scroll to the top of the page. We use only the id selector for this project you can see in html how we connect this link to our 1st section.

Hope you like this project, we create your own and use this project in any project. If you need any more project-related frontend. Visit our homepage and you get 100+ projects💝.

if you have any confusion Comment below or you can contact us by filling out our contact us form from the home section. 🤞🎉

written by – Codewithrandom

Источник

Scroll To Top or Back To Top Button using HTML & CSS

Hello readers, Today in this blog you’ll learn how to create a Scroll To Top or Back To Top Button using only HTML and CSS. Previously I have shared a Minimal To-Do List program that is based on HTML CSS & jQuery , now it’s time to create a Scroll Top Button using only HTML and CSS.

Nowadays every blogs and website have a separate button for going back to the top of the webpage. When we read or watch content on the website then we start scrolling down to see more content, but many times we want to go back on the upper side. For going back to the top of the webpage we have to scroll up, but most websites use a button to go back to the top with a single click.

You may saw on the many websites, there is a Scroll Top or Back To Top Button feature which is created using HTML CSS & Javascript. That is a pretty good feature and saves some seconds for your visitors or users.

If you’re feeling difficulty understanding what I am saying. You can watch a full video tutorial on this program (Scroll To Top or Back To Top Button).

Video Tutorial of Back To Top Button using HTML & CSS

I hope you understood the basic codes and concepts behind the creation of Back To Top or Scroll To Top Button Features. As you have seen in the video this is a pure CSS program, which means only HTML & CSS used to create this program.

If you like this program (Scroll To Top or Back To Top Button) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

Scroll To Top Button or Back To Top Button [Source Codes]

As always, before sharing the codes of this program (Scroll To Top or Back To Top Button). Let’s a few talks about the main tags and codes of this program. As you saw in the video, first I created a tag for the navbar of the webpage. Then inside the tag I created a tag with the class name “logo” for logo. After that, I created another tag with the class name “content” and placed all other tags inside it.

, and
tags for insert or show dummy text. In the CSS file, first I gave document to margin:0; and padding:0; using *(universal selector) which browser takes by default. Then I did some style to the navbar, texts etc.

To create this program (Scroll To Top or Back To Top Button). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

• List item 1
• List item 2
• List item 3

• List item 1
• List item 2
• List item 3

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url(‘https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap’); * < margin: 0; padding: 0; font-family: 'Poppins',sans-serif; >html < scroll-behavior: smooth; >nav < height: 70px; width: 100%; background: #1b1b1b; >nav .logo < padding-left: 100px; line-height: 70px; color: #f2f2f2; font-size: 30px; font-weight: 600; font-family: 'Poppins',sans-serif; >.content < position: relative; top: 10px; padding: 0 100px; >.content h2.header < font-size: 40px; >.content p < padding: 10px 0; font-size: 17px; text-align: justify; >.content h2 < font-size: 35px; >.content ul < padding-left: 30px; >ul li < font-size: 20px; >.arrow < position: fixed; bottom: 30px; right: 30px; z-index: 9; >.arrow a < height: 39px; width: 37px; text-align: center; background: #1b1b1b; display: block; border-radius: 3px; >.arrow a span

That’s all, now you’ve successfully created a Scroll To Top or Back To Top Button using HTML & CSS. If your code not work or you’ve faced any errors/problems then please comment down or contact us from the contact page.

Источник