Tag Archives: CSS

How to set custom scroll top with jQuery in your site.


 
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”;

Up Arrow

Up Arrow

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