Create Scroll to top button Fixed at left with Source Code and live demo - Implement Scroll to top button in Your Website Using HTML5, Css, Js

Home > HTML > Create Scroll to top button .

So this project is based on the Scroll to button,

In this project, I will use the only "js" for scrolling to top by button click .

I am sharing this projects source code for free.

So, to support me you can Subscribe to my YouTube channel.
Link is avaible any where in the page.

No need to give credits for bringing these project online .

HTML

First, Create an HTML file with the name of index.html and paste the code given below, in your HTML file. Remember, you’ve to create a file with .html extension.

Note*: Click on the HTML Code then press ctrl + A to select the whole HTML Code, then ctrl + C to copy.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Scroll To Top Button Demo</title>
</head>
<body>
<button onclick="topFunction()" id="top" title="Scroll to Top">↑</button>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at ex eget velit ultricies posuere in tempus eros. Sed quis malesuada erat, egestas tincidunt nulla. Proin sed laoreet nunc. Donec ut urna id diam maximus feugiat. Nam vitae ultrices ligula, mollis bibendum erat. Etiam auctor justo odio, eu condimentum metus accumsan in. In accumsan nisl ut convallis sollicitudin. Proin semper massa ac ex blandit, sit amet iaculis dolor convallis. Proin sed condimentum sem, sed efficitur lectus. Nam iaculis tincidunt tortor, eget tincidunt risus hendrerit non. Nunc lacus augue, tincidunt quis turpis quis, tempor fringilla magna. Aliquam mattis consequat nisi, eu lacinia eros vestibulum quis.

Curabitur posuere diam sed sapien vestibulum mollis. Cras vel ligula pellentesque, malesuada enim ac, dignissim nisl. Pellentesque mollis a purus pellentesque auctor. Pellentesque sagittis quam et efficitur malesuada. Vivamus commodo elit et mauris ultrices, sit amet facilisis ante luctus. Mauris diam ipsum, imperdiet eget elementum aliquam, ullamcorper sit amet odio. Nulla non luctus dolor. Nunc interdum vehicula mi in fermentum. Sed dui neque, suscipit vel diam vel, cursus consequat ligula. Nam euismod fringilla interdum. Donec pretium mollis pretium.

Morbi mauris augue, ultricies non vehicula sed, fringilla non mauris. Morbi malesuada efficitur diam, blandit efficitur ante eleifend vel. Nunc in enim at lacus cursus fermentum. Mauris vehicula felis quis sollicitudin pulvinar. Aenean id arcu sed massa aliquam convallis sit amet nec diam. Nunc non lectus erat. Aenean facilisis risus eget tellus vestibulum, et vestibulum ligula malesuada. Mauris rutrum vitae leo id vestibulum. Aliquam sit amet maximus odio. Vivamus in augue a lorem tempor suscipit. Proin eget tincidunt nulla, et pharetra quam. In non risus quis orci tempus placerat. Duis rutrum, lacus at pharetra blandit, nisl ex efficitur velit, ut vulputate ante leo id turpis. Proin elementum in purus at dapibus.

Sed elementum, lacus ac vulputate congue, augue justo dapibus odio, sit amet convallis est tellus ut arcu. Integer imperdiet lorem eu vestibulum efficitur. Proin mollis ligula nisl. Maecenas placerat, metus id aliquam mattis, justo augue tempus turpis, fermentum feugiat quam tortor id nibh. Sed et vulputate odio, nec rutrum sem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed id sem magna. Morbi vel sodales lacus. Maecenas malesuada nibh in libero pretium, sed luctus diam mollis. Donec non tortor id mi pulvinar vulputate. Nunc nulla dolor, blandit id lacinia ac, mollis non est. Suspendisse id pulvinar nisl. In sed orci dignissim, auctor metus non, vehicula eros.

Nulla tristique ac quam nec semper. Maecenas varius ac est sit amet gravida. Nulla in tempus nisl. In blandit auctor blandit. Nulla tristique velit sem, vel elementum turpis facilisis nec. Integer sodales risus ac ligula dignissim, a condimentum tortor ullamcorper. Integer feugiat fermentum sapien ac tristique. Nullam et dolor in lorem tempor laoreet et in eros. Aenean efficitur, risus nec mollis convallis, ipsum urna viverra ipsum, sit amet commodo ipsum felis nec nulla. Aenean quis commodo ante. Morbi ac faucibus ex, ac tempus ligula. Curabitur pulvinar vel lorem in posuere.

Vivamus fermentum, mauris id semper pharetra, elit justo cursus dui, vitae feugiat felis augue id felis. Morbi auctor lorem vel gravida cursus. Suspendisse vel leo non massa pharetra rutrum. Phasellus in dolor quis mauris tristique accumsan. Proin auctor laoreet eros eget consequat. Suspendisse at tortor lacinia, lobortis nibh nec, vehicula mi. Nam mi ex, iaculis at leo vel, tristique vehicula lacus. Suspendisse blandit sapien ut felis tempor tristique. Pellentesque tincidunt, mauris a vestibulum facilisis, eros erat lacinia enim, et sollicitudin felis ipsum eget nibh. Morbi hendrerit id magna vel efficitur. Donec id sem lorem. Cras vestibulum nec purus vel sollicitudin. Integer metus massa, efficitur sed lorem in, mollis tempor nisi. Duis dictum, tortor at luctus scelerisque, lectus nisl volutpat nulla, non laoreet massa nibh ullamcorper lacus. Nullam in nibh tincidunt dolor iaculis vulputate. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum massa eros, non lobortis nisl pellentesque at. Nulla eu sagittis purus. Phasellus porttitor fermentum tempor. Maecenas maximus elementum libero, ac maximus orci varius quis. Aenean nibh metus, suscipit sit amet risus quis, scelerisque hendrerit justo. Duis sit amet ullamcorper augue. Donec sit amet tristique ligula, in molestie ipsum. Sed lobortis, magna tincidunt dapibus rhoncus, mauris neque sollicitudin elit, eget sodales ante dui et elit. Quisque lobortis arcu sed faucibus rhoncus. Sed quis justo eu eros laoreet aliquet id ultricies tortor. Suspendisse sodales dui vel lorem vehicula, cursus sodales odio ultrices. Cras non dignissim purus. Nam non aliquam arcu. Nulla facilisi. Quisque sit amet est augue.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce ultricies, tortor et suscipit porta, diam ante vulputate sem, nec sagittis libero arcu a lacus. In euismod sem arcu, non pharetra libero scelerisque vitae. Vivamus ornare mauris quis nunc sodales auctor. Sed at condimentum velit, vel volutpat sem. Pellentesque varius erat metus, sit amet egestas nibh molestie ut. Maecenas at tincidunt lectus, ac feugiat libero.

</body>
</html>

Css

Second, Create a Css file with the name of style.css and paste the code given below, in your Css file. Remember, you’ve to create a file with .css extension.

Note*: Click on the Css Code then press ctrl + A to select the whole Css Code, then ctrl + C to copy.

JavaScript

Third, Create an Script file with the name of script.js and paste the code given below, in your JavaScript file. Remember, you’ve to create a file with .js extension.

Note*: Click on the Js Code then press ctrl + A to select the whole Js Code, then ctrl + C to copy.

One-Tap to Get the File

Note*: After Clicking the Download button wait for sometime.
If the source file dosen't start to download, then allow this site to download files in your system.

Frequently Asked Questions

Q 1: Can I use this Source Code without giving credits ?

Ans: Yes, you can use but if your bring this projects, then should give us a credit at footer, because it takes alot time make all thess kinds of projects now if you ask that I want to bring it online but I will not give any credits to the developers & the provider then it is very wrong.

Q 2: Actually I want to bring this project online but I don't want to give credits ?

Ans: Ok, we have problem but also you cannot claim that it is made by you.
It is not all about flex you should increase you knowledge.

Q 3: If I am bringing this project online and not giving credits & claiming it is developed by me then ?

Ans: Ok, 1-3 times you will be warned and your that site will be suspended.
Still if you continue, then it can become to a legal things.