Add a go to top of the page button with smooth scrool effect on wapkiz site using Html, CSS and JavaScript

3 Steps to install this button on your wapkiz site.

1.  Add Html
2. Add CSS
3. Add jQuery from Google
4. Create JavaScript

However you can use the codes on any hosting site.

1. Go to footer page (-2) and paste the below html code to create the button.

<a href="#" id="scroll" style="display: none;"><span></span></a>

Now customize the button using css.

2. Add CSS

#scroll {position:fixed;right:10px;bottom:30px;cursor:pointer;width:50px;height:50px;background-color:#3498db;text-indent:-9999px;display:none;-webkit-border-radius:60px;-moz-border-radius:60px;border-radius:60px} #scroll span {position:absolute;top:50%;left:50%;margin-left:-8px;margin-top:-12px;height:0;width:0;border:8px solid transparent;border-bottom-color:#ffffff;} #scroll:hover {background-color:#e74c3c;opacity:1;filter:"alpha(opacity=100)";-ms-filter:"alpha(opacity=100)";}

3. Add Google jQuery

Open Meta Header and paste the below jQuery from google.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

4. Create JavaScript (Follow the steps to create JavaScript)

i) Open Js File Maker

ii) Create New Js File

iii) Paste the below JavaScript in the box and click submit

$(document).ready(function(){ $(window).scroll(function(){ if ($(this).scrollTop() > 100) { $('#scroll').fadeIn(); } else { $('#scroll').fadeOut(); } }); $('#scroll').click(function(){ $("html, body").animate({ scrollTop: 0 }, 600); return false; }); });

iv) Now Get Js file code (Copy the js file code)

v) Now, Go to footer page (-2) and paste the js file code at the bottom.

Enjoy !