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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s