Scroll To Top Button using HTML CSS Jquery

Scroll To Top Button using HTML CSS Jquery

 Today In this blog, I will share another simple snippet based on how to create a Scroll To Top Button using HTML CSS Jquery. Previously I have shared a text animation on hover, which I created using only HTML and CSS. Check that out snippet out if you want.

At present, lots of websites use a separate button for the user to get back to the top of the webpage. When viewers scroll down to explore more about the website, they sometimes need to get back to the top of the page for some reason. If any website doesn't have a scroll to the top button, the visitor must scroll around manually back to the top. This experience sometimes may irritate the user, and they might not feel right. For this purpose, web designers are nowadays using dynamic and animated jquery scroll to top button in their website design. It will save a tremendous amount of time for the visitors, and they will have a good impression of the website.


Video demo of jquery scroll to the top Button:



So I am assuming you have watched the demo. For making the project of Back To Top or Scroll To Top Button, I have used simple HTML and CSS code and a little bit of jquery. These codes will be easy to understand and implement.

If you like to add this project (Scroll To Top Button) and want the code, you have to scroll down and get this project's code.

Before sharing the code, I would like to talk a bit about this snippet (Scroll to Top with Jquery). I first created a div element named ''banner' and placed a simple h1 tag with some random text. After that, inside a div, I took another div called 'content,' and inside that, I have taken an h2 tag and paragraph tag with some lorem ipsum text. Here, content div is self-explanatory and indicates the contents that we see under any website's main banner.

You may also like:
Underneath the div, I have taken an anchor tag and named that 'scrollUp.' i also placed a font-awesome icon inside it. I have chosen the 'chevron-up' icon from all the font-awesome icons because that will be the best fit for this project.

In the CSS styling, I first fixed the default margin padding problem of the document by giving the universal selector a zero margin padding. After that, I used CSS flex property to bring the h1 tag in the banner's middle. I also used a random background image to make the project looks a bit aesthetic. I did some basic styling like font-family and size for the h1 tag to make the text look larger. After that, I styled the content and the button, which we will use to create the scroll to top button animation. I separately styled an active class for the 'scrollUp' button, which will trigger when the user will scroll down. That means when the 'pageYOffest' will be above 100, and this active class will trigger or appear; otherwise, it will remove the active. For a smooth transition, I have used CSS 'scroll-behavior: smooth' so that whenever someone clicks on the button, it slowly goes to the top of the page.

Create this project, make one HTML, CSS, and js file and paste them down below and save. Run the project to your browser and play around with the code.

HTML




CSS 




JS 




I hope you liked this simple snippet. Please follow our social media profiles to stay connected with this blog. Thank you for visiting the blog.

Please do not enter any spam link in the comment box.

Post a Comment

Please do not enter any spam link in the comment box.

Post a Comment (0)

Previous Post Next Post