Hello friends, I have written a mini book on Cyber Security awareness for you, named "Hacking into Hackers' Head". This book uses common terms to explain things, and I'm sure you will get benefitted from it in your day to day life. It's available on Kindle and Google Play. Grab your copy now.

Thursday, February 6, 2014

How to add "Scroll to Top" to your site

Hi friends, today I am going to tell you how to add "Scroll to Top" button to your site or blog. It will help your readers to switch to top very smoothly if they are on end of the page or anywhere in the middle, else it will take a lot of time to scroll to top manually.

Just Follow these simple steps:

1. Add below css to your page. If you are using blogger, then search for ]]></b:skin> and add this code just above it.

/* CSS for adding Scroll to top button by Kamal Nayan START*/
#backtotop {
cursor : pointer;
display : none;
position : fixed;
right: 15px;
float: right;
bottom : 33px;
font-size : 90%;
padding : 10px;
width : 100px;
text-align : center;
background-color : #000;
border-radius : 8px;
-webkit-border-radius : 8px;
-moz-border-radius : 8px;
filter : alpha(opacity=60);
-khtml-opacity : 0.6;
-moz-opacity : 0.6;
opacity : 0.6;
color : #FFF;
font-size : 14px;
z-index : 1000;
}
#backtotop:hover
{
filter : alpha(opacity=90);
-khtml-opacity : 0.9;
-moz-opacity : 0.9;
opacity : 0.9;
}
/* CSS for adding Scroll to top button by Kamal Nayan END*/

2. After CSS, its time for JavaScript and JQuery. Add following script in <head> section of your site. For blogger user, search for <head> and paste these codes just below it.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
$(window).scroll(function() {
if($(this).scrollTop() != 0) {
$(&#39;#backtotop&#39;).fadeIn();
} else {
$(&#39;#backtotop&#39;).fadeOut();
}
});

$(&#39;#backtotop&#39;).click(function() {
$(&#39;body,html&#39;).animate({scrollTop:0},800);
});
});
</script>

3. Add a div element with id as backtop anywhere in your site. I have added just after footer, and I will prefer for the same. Search for </body> and paste below code just before it.

<div id='backtotop'>Scroll to Top</div>


You can write any text in place of "Scroll to top".

Keep on reading my blogs.

No comments:

Post a Comment

We appreciate your valuable comments.

Scroll to Top