jQuery Fade In Scroll To Top Button With Smooth Scroll
Firstly with jQuery you can have the button hidden until the page is scrolled, secondly when clicked the page scrolls smoothly to the top instead of the direct jump a regular link would have.So that's exactly what i have in this tutorial.We will add a button that will only be visible when the reader starts scrolling and then when they click it the page slowly scrolls up easing into position at the top.For the button itself we us a sprite to create a hover effect sprites also keep the page load time down.Step 1. In Your Blogger Dashboard Click Design > Edit Html
Step 2.
Ctrl and F for a search bar to and Find thecode ]]></b:skin>
Ctrl and F for a search bar to and Find thecode ]]></b:skin>
Step 3. Copy and Paste the following code Directly Above / Before ]]></b:skin>
#toTop {
display:none;
text-decoration:none;
position:fixed;
bottom:10px;
right:10px;
overflow:hidden;
width:51px;
height:51px;
border:none;
text-indent:-999px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPo3NJWoRETk8CmjBd-3djzibmEGM7kS2ik7ORnDNHyWIgUdjnNCBBlDMwFWRTY6jg6ekmmGmRSUyMOIQAA0UWRApgIZNd4FPWacHEI4SJdE0jXLx5NoBB3p8jnk8BqrTLhC3IcoMIU34/s1600/ui.totop.png) no-repeat left top;
}
#toTopHover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPo3NJWoRETk8CmjBd-3djzibmEGM7kS2ik7ORnDNHyWIgUdjnNCBBlDMwFWRTY6jg6ekmmGmRSUyMOIQAA0UWRApgIZNd4FPWacHEI4SJdE0jXLx5NoBB3p8jnk8BqrTLhC3IcoMIU34/s1600/ui.totop.png) no-repeat left -51px;
width:51px;
height:51px;
display:block;
overflow:hidden;
float:left;
opacity: 0;
-moz-opacity: 0;
filter:alpha(opacity=0);
}
#toTop:active, #toTop:focus {
outline:none;
}
Note - To move the button to the left of your blog change right:10px; to left:10px; .
Step 4. Find the following piece of code in your blogs Html
Step 5. Now Copy And Paste This Code Directly Above / Before </head>
Note - If you have previously added jQuery script to your template you can leave out the line in green.
Step 4. Find the following piece of code in your blogs Html
</head>
Step 5. Now Copy And Paste This Code Directly Above / Before </head>
Note - If you have previously added jQuery script to your template you can leave out the line in green.
Step 6. Save your template.
====<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>
<script src='http://suyb.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>
<script src='http://suyb.googlecode.com/files/jquery.ui.totop.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
/*
var defaults = {
containerID: 'moccaUItoTop', // fading element id
containerHoverClass: 'moccaUIhover', // fading element hover class
scrollSpeed: 1200,
easingType: 'linear'
};
*/
$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>
0 التعليقات:
Post a Comment