DEV Community

Cover image for How to make to top using 5 lines of jQuery
Nishtha Neeraj Kushwah
Nishtha Neeraj Kushwah

Posted on

How to make to top using 5 lines of jQuery

#css #jquery #javascript #html

Sometimes we find it hard to make a back to top button. And sometimes confused in many lines of code didn't understand what the error about is. Today we are going to make back to top functionality in 5 lines of jQuery.

GitHub:

GitHub logo nishthaneeraj / Back-to-top-in-jQuery

Simple Back to top Functionality Using jQuery


Live Demo: https://nishthaneeraj.github.io/Back-to-top-in-jQuery/
Codepen:

First, Make a footer with the id of footer or anything meaningfull

<footer class="page-footer  p-3 footer text-center" id="footer"> Back to Top

</footer>
Enter fullscreen mode Exit fullscreen mode

Second, add some CSS (not compulsory but let's do it i have also added bootstrap in it
read this first

nishthaneeraj

How To use libraries and framework in Codepen

Nishtha Neeraj Kushwah ・ Jul 2 ・ 2 min read

#css #javascript #codepen

)

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap");

* {
  margin: 0;
  padding: 0;
}
body {
  background-color: #eec0c6;
  background-image: linear-gradient(315deg, #eec0c6 0%, #7ee8fa 74%);
  color: #002999;
  font-family: "Poppins", sans-serif;
  overflow-x: hidden;
}
html {
  scroll-behavior: smooth;
}
.footer {
  background: #002999;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
footer {
  margin: 0;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
}
/* Custom Scroll Bar */

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background-color: #fff;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  background-color: #00d9bf;
  border-radius: 5px;
}
Enter fullscreen mode Exit fullscreen mode

Then, finally add JS
First add the jQuery link
( if you are using a code editor then add into the HTML file in the bottom after your script.js
jQuery Link: https://code.jquery.com/jquery-3.3.1.min.js
Or
If you are using codepen add in is section if you don't know read this post:

nishthaneeraj

How To use libraries and framework in Codepen

Nishtha Neeraj Kushwah ・ Jul 2 ・ 2 min read

#css #javascript #codepen

)

//Get the button:
const footer = document.getElementById("footer");

$("#footer").on("click", function () {
  $(window).scrollTop(0);
});
Enter fullscreen mode Exit fullscreen mode

Explanation:
First Getting the Button

//Get the button:
const footer = document.getElementById("footer");
Enter fullscreen mode Exit fullscreen mode

next adding Event Listener (Click Obviously) to it
then reseting the scroll value to 0

//Get the button:
$("#footer").on("click", function () {
  $(window).scrollTop(0);
});
Enter fullscreen mode Exit fullscreen mode

That's it

Happy Coding πŸ˜ƒ.
Bye πŸ‘‹ have a good day 😊

Top comments (4)

Collapse
 
posandu profile image
Posandu β€’

Why use jQuery when there is a pure CSS solution ?

<body id="main">
    <div style="height: 2000px;">
      Scroll down
    </div>
    <a href="#main">Go to top</a>
</body>
Enter fullscreen mode Exit fullscreen mode

if you need smooth scroll

* {
       scroll-behavior: smooth;
  }
Enter fullscreen mode Exit fullscreen mode
Collapse
 
nishthaneeraj profile image
Nishtha Neeraj Kushwah β€’

I know this but I'm not satisfied with this because when I use this it adds a #idname in the url but in my solution it's not adding anything in my url

Collapse
 
posandu profile image
Posandu β€’

Then this is a single line PURE JS solution :D

<a onclick=" window.scrollTo(0,0);">Go to top</a>
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
nishthaneeraj profile image
Nishtha Neeraj Kushwah β€’

Thanks I don't know that thanks for this kind information

DEV Community

11 Tips That Make You a Better Typescript Programmer

typescript

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!

πŸ‘‹ Kindness is contagious

Explore a trove of insights in this engaging article, celebrated within our welcoming DEV Community. Developers from every background are invited to join and enhance our shared wisdom.

A genuine "thank you" can truly uplift someone’s day. Feel free to express your gratitude in the comments below!

On DEV, our collective exchange of knowledge lightens the road ahead and strengthens our community bonds. Found something valuable here? A small thank you to the author can make a big difference.

Okay