Home Web Development JavaScript JavaScript Scroll To Top Feature | HTML CSS JavaScript Go To Top

JavaScript Scroll To Top Feature | HTML CSS JavaScript Go To Top

May 25, 2019

10208

How to create a button on the webpage to go back top? Solution: JavaScript Scroll To Top Feature, HTML CSS JavaScript Go To Top button.

Nowadays every blog and websites have a sperate button for going back to the top of the webpage. When we read or watch content on website then we start scrolling down to see more, 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 sites use a button to go back to top on a single click.

That is a pretty good feature and save some seconds. Now mostly WordPress theme comes pre-built with this feature. Now we don’t have to scroll up to reach the top of the webpage, just single click on a button you are done. Mostly these scroll to the top program made with jQuery, but I had created this in pure JavaScript.

So, Today I am sharing JavaScript Scroll To Top Button or Feature. You can call this a Pure HTML CSS & JavaScript Go To Top function, without any library. Basically, the whole program is based on JavaScript scrollTop command. And the button is fully styled in CSS.

Now if you are thinking about how this JavaScript scrollTop program actually is? then see the preview given below.

Preview Of HTML CSS JavaScript Go To Top

See this video preview to getting an idea of how this program looks like.

Now you can see this program visually. If you like this program then get the source code of its.

JavaScript Scroll To Top or scrollTop Source Code

Before sharing source code, let’s talk about this program. As you know this is a pure JavaScript program, not used any library. For creating this HTML CSS JavaScript Scroll To Top feature, I used JavaScript’s scrollTop ( get info )command. I had set the limit, when y reached over 500 value then the button will appear.

For creating this program you have to create 3 files. First for HTML, second for CSS, and third for JavaScript. Follow the steps to creating this program without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

<!DOCTYPE html>
<!-- code by webdevtrick ( https://webdevtrick.com) -->
<html>

<head>
  <meta charset="UTF-8">
  <title>JavaScript Go to top | Webevtrick.com</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
	
  <button class="gototop"></button>

	<div>Website Terms and Conditions of Use
Terms
By accessing this website, you are agreeing to be bound by these website Terms of Use, all suitable regulations and also policies, as well as agree that you are in charge of conformity with any applicable local legislation. If you do not agree with any of these terms, you are forbidden from using or accessing this website. The products had on this website are protected by applicable copyright and also trademark law.<br><br>
Usage License<br>
Authorization is given to briefly download and install one copy of the products ( information or software application) on WebDevTrick’s website for an individual, non-commercial temporal watching only. This is the give of a license, not a transfer of title, as well as under this license you might not:<br>
Modify or duplicate the materials;<br>
Make use of the materials for any commercial objective, or for any public display (business or non-commercial).<br>
Attempt to decompile or turn around designer any software application contained on WebDevTrick’s website.<br>
Remove any copyright or various other exclusive symbols from the materials; or.<br>
Move the materials to an additional person or “mirror” the products on any other web server.<br>
This license shall instantly end if you violate any one of these restrictions as well as could be terminated by WebDevTrick at any moment. After terminating your viewing of these materials or upon the termination of this license, you should damage any downloaded and install products in your possession whether in electronic or published layout.<br><br>
Disclaimer.<br>
The materials on WebDevTrick’s web site are offered “as is”. WebDevTrick makes no guarantees, shared or indicated, and thus disclaims and also negates all other service warranties, including without limitation, implied service warranties or conditions of merchantability, health and fitness for a specific purpose, or non-infringement of intellectual property or various other infraction of legal rights. Additionally, WebDevTrick does not warrant or make any type of representations concerning the accuracy, likely outcomes, or reliability of using the materials on its Internet internet site or otherwise connecting to such materials or on any kind of sites linked to this website.<br><br>
Limitations.<br>
In no event will WebDevTrick or its distributors be responsible for any kind of problems (including, without limitation, problems for loss of data or profit, or due to business disturbance,) developing out of the use or lack of ability to utilize the products on WebDevTrick’s Internet site, even if WebDevTrick or a WebDevTrick authorized agent has actually been alerted by mouth or handwritten of the opportunity of such damages. Because some jurisdictions do not permit limitations on suggested guarantees, or restrictions of responsibility for substantial or subordinate damages, these limitations could not apply to you.<br><br>
Alterations as well as Errata.<br>
The materials appearing on WebDevTrick’s website can include technological, typographical, or photo errors. WebDevTrick does not require that any one of the products on its web site are precise, total, or current. WebDevTrick could make changes to the products had on its internet site at any time without notice. WebDevTrickdoes not, nevertheless, make any kind of commitment to upgrade the materials.<br><br>
Links.<br>
WebDevTrick has actually not examined all the sites connected to its Internet website and also is not responsible for the contents of any type of such linked site. The addition of any link does not indicate recommendation by WebDevTrick of the website. Use any type of such linked website goes to the customer’s very own danger.<br><br>
Site Terms of Use Modifications.<br>
WebDevTrick might revise these regards to use for its web site at any time without notification. Using this website you are accepting be bound by the after that current version of these Terms and Conditions of Use.<br><br>
Governing Law.<br>
Any kind of claim relating to WebDevTrick’s web site will be controlled by the legislations of the State of Virginia without regard to its conflict of legislation stipulations.<br>
General Conditions appropriate to Use a Website.<br><br>
Privacy Policy.<br>
Your privacy is crucial to us. Accordingly, we have actually established this Policy in order for you to comprehend how we accumulate, utilize, communicate as well as disclose and also use individual information. The adhering to details our privacy policy.<br>
Before or at the time of accumulating personal information, we will determine the objectives for which information is being collected.<br>
We will certainly collect as well as use personal information only with the goal of meeting those functions specified by us and also for other suitable objectives, unless we get the permission of the specific concerned or as needed by regulation.<br>
We will just retain individual information as long as essential for the satisfaction of those functions.<br>
We will accumulate individual information by lawful and also reasonable means and, where appropriate, with the understanding or consent of the private concerned.<br>
Individual data need to pertain to the purposes for which it is to be made use of, and also, to the degree needed for those purposes, should be precise, complete, and up-to-date.<br>
We will certainly protect individual information by sensible security safeguards against loss or theft, as well as unauthorized accessibility, disclosure, duplicating, use or alteration.<br>
We will make easily offered to customers information about our plans and techniques associating with the monitoring of individual information.<br>
We are committed to performing our business in accordance with these concepts in order to guarantee that the confidentiality of individual information is safeguarded and also maintained.<br>
	</div>
    <script  src="function.js"></script>
</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>JavaScript Go to top | Webevtrick.com</title>

</head>

<body>

<div>Website Terms and Conditions of Use

Terms

By accessing this website, you are agreeing to be bound by these website Terms of Use, all suitable regulations and also policies, as well as agree that you are in charge of conformity with any applicable local legislation. If you do not agree with any of these terms, you are forbidden from using or accessing this website. The products had on this website are protected by applicable copyright and also trademark law.

Usage License

Authorization is given to briefly download and install one copy of the products ( information or software application) on WebDevTrick’s website for an individual, non-commercial temporal watching only. This is the give of a license, not a transfer of title, as well as under this license you might not:

Modify or duplicate the materials;

Make use of the materials for any commercial objective, or for any public display (business or non-commercial).

Attempt to decompile or turn around designer any software application contained on WebDevTrick’s website.

Remove any copyright or various other exclusive symbols from the materials; or.

Move the materials to an additional person or “mirror” the products on any other web server.

This license shall instantly end if you violate any one of these restrictions as well as could be terminated by WebDevTrick at any moment. After terminating your viewing of these materials or upon the termination of this license, you should damage any downloaded and install products in your possession whether in electronic or published layout.

Disclaimer.

The materials on WebDevTrick’s web site are offered “as is”. WebDevTrick makes no guarantees, shared or indicated, and thus disclaims and also negates all other service warranties, including without limitation, implied service warranties or conditions of merchantability, health and fitness for a specific purpose, or non-infringement of intellectual property or various other infraction of legal rights. Additionally, WebDevTrick does not warrant or make any type of representations concerning the accuracy, likely outcomes, or reliability of using the materials on its Internet internet site or otherwise connecting to such materials or on any kind of sites linked to this website.

Limitations.

In no event will WebDevTrick or its distributors be responsible for any kind of problems (including, without limitation, problems for loss of data or profit, or due to business disturbance,) developing out of the use or lack of ability to utilize the products on WebDevTrick’s Internet site, even if WebDevTrick or a WebDevTrick authorized agent has actually been alerted by mouth or handwritten of the opportunity of such damages. Because some jurisdictions do not permit limitations on suggested guarantees, or restrictions of responsibility for substantial or subordinate damages, these limitations could not apply to you.

Alterations as well as Errata.

The materials appearing on WebDevTrick’s website can include technological, typographical, or photo errors. WebDevTrick does not require that any one of the products on its web site are precise, total, or current. WebDevTrick could make changes to the products had on its internet site at any time without notice. WebDevTrickdoes not, nevertheless, make any kind of commitment to upgrade the materials.

Links.

WebDevTrick has actually not examined all the sites connected to its Internet website and also is not responsible for the contents of any type of such linked site. The addition of any link does not indicate recommendation by WebDevTrick of the website. Use any type of such linked website goes to the customer’s very own danger.

Site Terms of Use Modifications.

WebDevTrick might revise these regards to use for its web site at any time without notification. Using this website you are accepting be bound by the after that current version of these Terms and Conditions of Use.

Governing Law.

Any kind of claim relating to WebDevTrick’s web site will be controlled by the legislations of the State of Virginia without regard to its conflict of legislation stipulations.

General Conditions appropriate to Use a Website.

Your privacy is crucial to us. Accordingly, we have actually established this Policy in order for you to comprehend how we accumulate, utilize, communicate as well as disclose and also use individual information. The adhering to details our privacy policy.

Before or at the time of accumulating personal information, we will determine the objectives for which information is being collected.

We will certainly collect as well as use personal information only with the goal of meeting those functions specified by us and also for other suitable objectives, unless we get the permission of the specific concerned or as needed by regulation.

We will just retain individual information as long as essential for the satisfaction of those functions.

We will accumulate individual information by lawful and also reasonable means and, where appropriate, with the understanding or consent of the private concerned.

Individual data need to pertain to the purposes for which it is to be made use of, and also, to the degree needed for those purposes, should be precise, complete, and up-to-date.

We will certainly protect individual information by sensible security safeguards against loss or theft, as well as unauthorized accessibility, disclosure, duplicating, use or alteration.

We will make easily offered to customers information about our plans and techniques associating with the monitoring of individual information.

We are committed to performing our business in accordance with these concepts in order to guarantee that the confidentiality of individual information is safeguarded and also maintained.

</div>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes.

/** code by webdevtrick ( https://webdevtrick.com) **/
body{
  padding: 20px 15%;
  font-family: roboto;
  font-size: 20px;
  background-color: #202020;
  color: #eee;
  line-height: 33px;
  position: relative;
}

.gototop{
  position: fixed;
  display: block;
  box-sizing: border-box;
  height: 50px;
  width: 50px;
  border: none;
  background-color: #FD3437;
  border-radius: 3px;
  bottom: 50px;
  right: 50px;
  margin-right: -30px;
  outline: none;
  opacity: 0;
  transition: opacity .3s ease, margin-right .5s ease-out;
}

.visible{
  transition: opacity .3s ease, margin-right .5s ease-out;
  margin-right: 0px;
  opacity: .6;
}

.gototop::before, .gototop::after{
  content: '';
  position: absolute;
  height: 18px;
  width: 2px;
  background-color: #fff;
  top: 16px;
}
.gototop::before{
  left: 18px;
  transform: rotate(45deg);
}
.gototop::after{
  right: 18px;
  transform: rotate(-45deg);
}

/** code by webdevtrick ( https://webdevtrick.com) **/

body{

padding: 20px 15%;

font-family: roboto;

font-size: 20px;

background-color: #202020;

color: #eee;

line-height: 33px;

position: relative;

}

.gototop{

position: fixed;

display: block;

box-sizing: border-box;

height: 50px;

width: 50px;

border: none;

background-color: #FD3437;

border-radius: 3px;

bottom: 50px;

right: 50px;

margin-right: -30px;

outline: none;

opacity: 0;

transition: opacity .3s ease, margin-right .5s ease-out;

}

.visible{

transition: opacity .3s ease, margin-right .5s ease-out;

margin-right: 0px;

opacity: .6;

}

.gototop::before, .gototop::after{

content: '';

position: absolute;

height: 18px;

width: 2px;

background-color: #fff;

top: 16px;

}

.gototop::before{

left: 18px;

transform: rotate(45deg);

}

.gototop::after{

right: 18px;

transform: rotate(-45deg);

}

function.js

The final step, Create a JS file named ‘function.js‘ and the codes given here.

/** code by webdevtrick ( https://webdevtrick.com) **/
document.addEventListener('DOMContentLoaded', function () {
    let gototop = document.querySelector('.gototop');
    let body = document.documentElement;

    window.addEventListener('scroll', check);

    function check() {
        pageYOffset >= 500 && gototop.classList.add('visible');
        pageYOffset < 500 && gototop.classList.remove('visible');
    }


    gototop.onclick = function() {
        animate({
            duration: 700,
            timing: gogototopEaseOut,
            draw: progress =>
                body.scrollTop = (body.scrollTop * (1 - progress / 7))
        });
    }

    let circ = timeFraction =>
        1 - Math.sin(Math.acos(timeFraction > 1 ? timeFraction = 1 : timeFraction));

    let makeEaseOut = timing => timeFraction => 1 - timing(1 - timeFraction);
    let gogototopEaseOut = makeEaseOut(circ);
});

function animate(options) {
    let start = performance.now();

    requestAnimationFrame(function animate(time) {
        let timeFraction = (time - start) / options.duration;
        timeFraction > 1 && (timeFraction = 1);

        let progress = options.timing(timeFraction)

        options.draw(progress);
        timeFraction < 1 && requestAnimationFrame(animate);
    });
}

/** code by webdevtrick ( https://webdevtrick.com) **/

document.addEventListener('DOMContentLoaded', function () {

let gototop = document.querySelector('.gototop');

let body = document.documentElement;

window.addEventListener('scroll', check);

function check() {

pageYOffset >= 500 && gototop.classList.add('visible');

pageYOffset < 500 && gototop.classList.remove('visible');

}

gototop.onclick = function() {

animate({

duration: 700,

timing: gogototopEaseOut,

draw: progress =>

body.scrollTop = (body.scrollTop * (1 - progress / 7))

});

}

let circ = timeFraction =>

1 - Math.sin(Math.acos(timeFraction > 1 ? timeFraction = 1 : timeFraction));

let makeEaseOut = timing => timeFraction => 1 - timing(1 - timeFraction);

let gogototopEaseOut = makeEaseOut(circ);

});

function animate(options) {

let start = performance.now();

requestAnimationFrame(function animate(time) {

let timeFraction = (time - start) / options.duration;

timeFraction > 1 && (timeFraction = 1);

let progress = options.timing(timeFraction)

options.draw(progress);

timeFraction < 1 && requestAnimationFrame(animate);

});

}

That’s It. Now you have successfully created JavaScript Scroll To Top Feature or scrollTop. In other words, HTML CSS JavaScript Go To Top button. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

11 COMMENTS

Farhan Ahmad May 25, 2019 At 10:21 pm

you forgot:—–>
//css
button{
cursor:pointer;
}

Reply
- shaan May 26, 2019 At 4:53 am
  
  Thank you very much, Yes I forget. Stay connected.
  
  Reply
SM Veer May 26, 2019 At 5:14 am

Great Post

SM Veer
CEO- mvweb.in

Reply
- shaan May 26, 2019 At 5:25 am
  
  Thank you very much, Stay connected.
  
  Reply
Nilay Choubey May 26, 2019 At 1:17 pm

Hi I’m Nilay
Can you please develope a phone working contact form for my site.
I would be very thankful to you if you do so….

Reply
- shaan May 26, 2019 At 3:46 pm
  
  SUre, I will post soon.
  
  Reply
Hendra Widjaja May 27, 2019 At 12:19 pm

Hi,
Why don’t you also create a demo link and make a link to it. So people can see the live demo instead of video

Thank you

Reply
- shaan May 27, 2019 At 2:46 pm
  
  Bro this websites is on WordPress, So I have to create and upload manually files on the server. Thanks for your comment, I will fix this as soon as possible.
  
  Reply
Dominic July 10, 2019 At 10:32 am

@Shaan, I really do appreciate your work, keep it up bro

Reply
- shaan July 10, 2019 At 11:06 am
  
  Thank you very much
  
  Reply
Fred July 18, 2020 At 10:06 pm

Great post Shaan,
I don’t understand how the top arrow shape is created without addressing any font? It should be be embedded somewhere in js. I am a beginner in javascript.

Reply