HashFlare

Monday, 22 May 2017

Back to Top Sticky Animated HTML code Effect when Scrolling

HashFlare HashFlare


Back to Top Sticky Animated HTML code Effect when Scrolling

Back to top sticky Button help your visitor for navigation and also being sticky with the scroll create an effect which makes this special, with that you can also customize it.
To have this code in your site follow the code




  • First you need to go to edit HTMl or Edit Template , then search for the below codes
  • Search for </style> and just above it paste the below code



.hackerprime-top:hover {
color: #fff !important;
background-color: #ed702b;
text-decoration: none;
}

.hackerprime-top {
display: none;
position: fixed;
bottom: 1rem;
right: 1rem;
width: 3.2rem;
height: 3.2rem;
line-height: 3.2rem;
font-size: 1.4rem;
color: #fff;
background-color: rgba(0,0,0,0.3);
text-decoration: none;
border-radius: 3.2rem;
text-align: center;
cursor: pointer;
}


  • Then just above </body> paste this code








<!-- hacker prime Scroll to Top Script -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'/>
</script>

<script>          
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.hackerprime-top').fadeIn(duration);
} else {
jQuery('.hackerprime-top').fadeOut(duration);
}
});

jQuery('.hackerprime-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>



  • Lastly add this code just above footer or after </head> ( I recommend Footer )


<a href="#" class="crunchify-top">↑</a>


  • Save the template and refresh your Page 
HashFlare

Author:

The Owner of this Site Hacker Prime, (Azeem Prime)



Use this code Link( Hacked) Only one Amazon Cart Check OUT For 36%-41% CUT in Price => Only From Amazon in INDIA
Bluehost Wordpress Hosting
Super optimized Wordpress Hosting starting at Rs.139/month (click here for the Code
=WEBSITE HOSTING !!=
============================
That's all. You are done!
If you encounter any problem, feel free and comment below to get solution. Share your experience with us.
============================


NOTE:- Do not Copy these Text and code for your commercial use. This Site is protected via DMCA.

Watch This Online

HashFlare

Post a Comment

Whatsapp Button works on Mobile Device only

Start typing and press Enter to search