Follow Me

Installing the Back to Top Button with jQuery UI

Installing the Back to Top Button with jQuery UI
Installing the Back to Top Button with jQuery UI - On this occasion Arlina Design will share how to install a back to top button that you are familiar with with the additional jQuery UI effect.

In the previous article I have shared a tutorial on this back to top button:

For those who want to try it, please follow the steps below:

Note: If the back to top button is installed in the blog template, please first delete the button.

1. Login to Blogger> Template> Edit HTML> Add the code below before ]]></b skin> or </style>
/* Back to top */
#easy-top{background:rgba(0,0,0,.5);text-align:center;position:fixed;bottom:15px;right:15px;cursor:pointer;width:38px;height:38px;line-height:38px;border-radius:4px;padding:4px;display:none;-webkit-transform:translateZ(0);box-sizing:initial;transition:all .3s ease-out}#easy-top:hover{background:rgba(0,0,0,.9)}#easy-top:before,#easy-top:after{-webkit-backface-visibility:hidden;box-sizing:initial;}#easy-top:before{content:'';height:8px;width:8px;display:block;border:3px solid #fff;border-left-width:0;border-bottom-width:0;transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);position:absolute;top:15px;left:18px}#easy-top:after{content:'';height:16px;width:3px;display:block;background:#fff;position:absolute;top:17px;left:22px}#easy-top:hover:after{border-color:transparent transparent rgba(0,0,0,.9)transparent}

2. Next, add the code below before </body>
<div id='easy-top'/>
<script type='text/javascript'>
//<![CDATA[
$(function(){$(window).scroll(function(){$(this).scrollTop()>600?$("#easy-top").fadeIn(100):$("#easy-top").fadeOut(0)}),$("#easy-top").click(function(){$("html, body").animate({scrollTop:0},{duration:2e3,easing:"easeOutQuint"})})});
//]]>
</script>

<script src='https://cdn.rawgit.com/Arlina-Design/redvision/master/easing.js' type='text/javascript'/>

3. Save the template and see the results.
If you want to install the back to top button with a bounce effect, please add the code below:
<div id='easy-top'/>
<script type='text/javascript'>
//<![CDATA[
$(function(){$(window).scroll(function(){$(this).scrollTop()>600?$("#easy-top").fadeIn(100):$("#easy-top").fadeOut(0)}),$("#easy-top").click(function(){$("html, body").animate({scrollTop:0},{duration:2e3,easing:"
easeOutBounce"})})});
//]]>
</script>

<script src='https://cdn.rawgit.com/Arlina-Design/redvision/master/easing.js' type='text/javascript'/>

To replace with other effects, please visit http://easings.net then change the code marked with the name of the available effect.

This is how to install the Back to Top button with jQuery UI. May be useful.
Next Post Previous Post
No Comment
Add Comment
comment url