Back to Top is very useful tool for a website that has a large amount of contents in it. We need to put then this tool named Back to Top / Go to Top/ Top, etc. It is very easy to use and to create.
To do this, we need to know some sorts of HTML, CSS, JavaScript. The steps are given below step by step.
HTML part:
To make a Back to Top button we just need to use an anchor tag as it shows in the code below. So use the below code above the end of your </body> tag.
<a href='#' id='back-to-top'>Back to Top</a>
 |
| Back to Top- THE ONLINE SCHOOL |
CSS part:
Nothing but you need to use the below CSS code in your style.css sheet or wherever you want.
JavaScript part:
a#back-to-top {
display: none;
width: 60px;
height: 60px;
text-indent: -9999px;
position: fixed;
z-index: 999;
right: 20px;
bottom: 20px;
background: url("https://cdn3.iconfinder.com/data/icons/sunnyset-2/200/Upload-128.png") no-repeat center 35%; /*----- use your up-arrow png URL here and resize the image by changing “%”-----------------------*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
|
 |
| click to see the full view- THE ONLINE SCHOOL |
To make Back to Top button smooth scroll and animated use the code just below where you used the HTML code.
<script>
var amountScrolled = 300;
$(window).scroll(function() {
if ( $(window).scrollTop() > amountScrolled ) {
$('a#back-to-top').fadeIn('slow');
} else {
$('a#back-to-top').fadeOut('slow');
}
});
</script>
<script>
$('a#back-to-top').click(function() {
$('html, body').animate({
scrollTop: 0
}, 700);
return false;
});
</script>
|
 |
| click to see the full view- THE ONLINE SCHOOL |
Don't forget to add JQuery library file. Download it from here and add the file between <script></script> tags and of course above the end of </head> tag.
Or if you don't understand anything then just copy and paste the below line between <head></head> tags.
Or if you don't understand anything then just copy and paste the below line between <head></head> tags.
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
 |
| click to see the full view- THE ONLINE SCHOOL
See the video if needs. The language is Bangla.
|
|||||||||||||||||||| end! ||||||||||||||||||||
0 comments:
__আপনার মতামত নিচে লিখুন। ধন্যবাদ।__