Add Animated Scroll to Top Button in WordPress

Add Animated Scroll to Top Button in WordPress

Add Animated Scroll to Top Button in WordPress now a days Blog Owner Loves to add Responsive Animation Addon’s to attract their website visitor’s in this tutorial we are going to see About How to add an Animated Scroll to Top Button in WordPress site without plugins this scroll to Top Button build with HTML/CSS and jQuery.

Add Animated Scroll to Top Button in WordPress Without using Plugin

Demo Screenshot (Tested in Twenty Fifteen WordPress theme)

• Log in to your WordPress Dashboard
• Now Copy the Below code and paste it on Footer Section on your WordPress website.Learn How to Insert a code in WordPress Footer

<div class="scroll-top">

<img src="data:image/png;base64,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" />

<span class="flame"></span>
<span class="flame"></span>
<span class="flame"></span>
</div>


<style>
.scroll-top img{
height:45px;
margin: -12px 0 0 5px;
border:0;
}

.scroll-top {height: 60px; width: 60px; position: fixed; bottom: 100px; right: 30px; display: none; z-index: 9999;}.scroll-top:hover{animation-delay:0s;animation-duration:.1s;animation-iteration-count:infinite;animation-name:shake-little;animation-play-state:running;animation-timing-function:ease-in-out}.scroll-top .flame{-moz-border-bottom-colors:none;-moz-border-left-colors:none;-moz-border-right-colors:none;-moz-border-top-colors:none;border-color:#ffda44 transparent transparent;border-style:solid;border-width:25px 3px 3px;display:none;height:0;left:-4px;margin:-5px auto 0;position:absolute;right:0;top:66%;width:0}.scroll-top .flame+.flame{border-width:10px 2px 2px;left:20px;margin:0}.scroll-top .flame+.flame+.flame{border-width:10px 2px 2px;left:auto;margin:0;right:24px}.scrolling .flame{display:block}.nav-toggle,.owl-item .quote-icon,.price-box .price-box-head-shadow,.scroll-top .flame{transition:all .5s cubic-bezier(.25,.1,.25,1) 0s}@keyframes shake-little{0%{transform:translate(0,0) rotate(0)}14%,16%,2%,20%,24%,30%,48%,52%,54%,76%,8%,84%,86%,88%,92%,96%,98%{transform:translate(0,0) rotate(-.5deg)}10%,12%,22%,32%,4%,42%,44%,64%,72%,80%,90%{transform:translate(-1px,0) rotate(-.5deg)}18%,34%,36%,46%,6%,66%,68%,70%,74%,82%,94%{transform:translate(0,-1px) rotate(-.5deg)}26%,28%,38%,40%,50%,56%,58%,60%,62%,78%{transform:translate(-1px,-1px) rotate(-.5deg)}}
</style>


<script type="text/javascript">
// Scroll to top button
 wnHeight = jQuery(window).height();
 //Check to see if the window is top if not then display button
 jQuery(window).scroll(function(){
 if (jQuery(this).scrollTop() > wnHeight/2) {
 jQuery('.scroll-top').fadeIn();
 } else {
 jQuery('.scroll-top').fadeOut().removeClass('scrolling');
 }
 });

//Click event to scroll to top
 jQuery('.scroll-top').click(function(){
 jQuery('html, body').animate({scrollTop : 0},800);
 jQuery(this).addClass('scrolling');

});

</script>

• You can Also add your own Rocket Image Get it From Here Rocket Icons.You can Convert them into Base 64 Format for Fast Loading.check the above script I highlighted with red color replace the Image Url with your Image URL.
• You can also adjust its positioning by editing the margin CSS Code.

Credits

This Animated Scroll To Top Widget Was developed By Dhiraj Barnwal (allbloggertricks.com)

From the Editor’s Desk

If your Theme having a built-in Scroll to top Button Feature Means Disable it From your theme Option Panel or Contact your Theme developer for Disable the built-in Scroll to top Button and Replace it with the Animated Scroll to Top Button.

If you Need Any Help Please Feel to Comment Here Our team will Help you.