For set smooth and sexy scroll in your site then you have to set below HTML, CSS and jQuery code and see the magic
Set Below HTML in your template file.
<div class="goTotop"> <p style="display: block;" id="back-top"> <a title="scroll to top" href="#top"> <span></span> </a> </p> </div>
Set below style for add scroll top functionality
#back-top span{background: url("up-arrow.png") no-repeat scroll center center #aaacff !important; border-radius: 15px 15px 15px 15px;height: 108px; display:block; margin-bottom:7px; width:108px; transition:background-color 2s ease 0s;} .goTotop{float:right; margin-right:30px;} #back-top {bottom:20px; margin-left:50px;position:fixed;} #back-top a {display : block; text-align:center; text-decoration:none; text-transform:uppercase; transition:background-color 2s ease 0s; width:108px;}
Set below Javascript in your template
<script type="text/javascript"> jQuery(document).ready(function(){ jQuery("#back-top").hide(); jQuery(function () { jQuery(window).scroll(function () { if (jQuery(this).scrollTop() > 300) { jQuery('#back-top').fadeIn(); } else { jQuery('#back-top').fadeOut(); } }); jQuery('#back-top a').click(function () { jQuery('body,html').animate({ scrollTop: 0 }, 800); return false; }); }); }); </script>
You can set below image in your css “up-arrow.png”;
Now you can see the magic of the arrow of scroll top functionality 🙂 🙂
If you have any queries, please do not hesitate to contact me at Jainish Senjaliya
Advertisements