Add smooth scroll to the top of page fixed button in wapkiz

Wapkiz , Wapkiz Codes , Website Building Tutorial   

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

Click Here To See Demo

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 !

For any further information please Contact Us or comment below.

Share this: