Hey Guys , In Today’s Blog We are going to see How to create an Create a Scroll Back To Top Button Using HTML & JAVASCRIPT. For that the respective sources codes were given below along with the respective preview of output section. So you can make use of that.

Create a Scroll Back To Top Button Using HTML

Now The Project is going to create and for that we are first adding an HTML Code.

HTML CODE:

<div class="container text-center py-5" style="height:1000px">
  <h3>Back to top method</h3>
  <h5 class="text-muted">
    only using bootstrap classes - support ltr & rtl
  </h5>
</div>


<button class="btn btn-sm btn-primary rounded-circle position-fixed bottom-0 end-0 translate-middle d-none" onclick="scrollToTop()" id="back-to-up">
  <i class="fa fa-arrow-up" aria-hidden="true"></i>
</button>

Here We have used Bootstrap Html codes in which we would see it in every div class names. Simply we have to go for bootstrap CDN and copy the link and paste it inside head tag. Now we can add containers using these links.

Portfolio Website using HTML and CSS (Source Code)

We just adding an heading and a sub-heading with h3 and h5 tags. Then we are adding an button with the classes and setting an onclick function.

Lastly we are adding arrow for going to top using I tag.

So this is what for HTML , Now We are skipping the CSS part as we have used bootstrap , So now we go for an Java script to make it to move from bottom to top.

JAVASCRIPT CODE:

window.onscroll = () => {
  toggleTopButton();
}
function scrollToTop(){
  window.scrollTo({top: 0, behavior: 'smooth'});
}

function toggleTopButton() {
  if (document.body.scrollTop > 20 ||
      document.documentElement.scrollTop > 20) {
    document.getElementById('back-to-up').classList.remove('d-none');
  } else {
    document.getElementById('back-to-up').classList.add('d-none');
  }
}

First , We are setting on scroll to toggleTopButton using arrow function. It means it provides an toggle between the checked and unchecked states.

Then we are creating an function with name scrollToTop() and setting the top to zero and the webpage scroll be haviour to smooth.

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

Again the function mentioned in on scroll is called here and comparing the scroll to 20 which needs to be greater and then with help of get element we are getting the specific element and setting it to remove using class list property. Else We are setting it to add.

Now we have completed our Java Script part and Hence we came for the end of project. But Just make sure to use the preview given below.

FINAL OUTPUT Of  Scroll Back To Top Button Using HTML:

Now We have Successfully created our Back To Top Using HTML & JAVASCRIPT. You can use this project for your personnel needs and the respective lines of code are given with the code pen link mentioned below.

If you find out this Blog helpful, then make sure to search code random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

REFER CODE- Suleiman Al-othman

WRITTEN BY- Ragunathan