Now a days in many website scroll to top button is available , here i give u simple way to do this.
Problem :
1.When page is loaded at that time button should not be visible
2.When we scroll down it will be visible
3.and last when we click on it ,it redirect us to top and get invisible
Solution:
First of all copy the following code in file as i suggest.
Put in body part of html
------------------------------
<div id="top" class="">
<a href="#" title="To Top">
<img src="up.png" height="40" width="40">
</a>
</div>
Put following in css file
-----------------------------
#top.display
{
bottom: 20px;
}
#top
{
position: fixed;
width: 40px;
height: 40px;
right: 20px;
bottom: -50px;
z-index: 999;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
Write this script at bottom of html or in separate .js file as you want
------------------------------------------------------------------------------------
<script>
jQuery(document).ready(function () {
jQuery('#top a').click(function () {
jQuery('html, body').animate({scrollTop: '0'}, 800);
return false;
});
});
jQuery(window).scroll(function () {
if (jQuery(document).scrollTop() > 100)
{
jQuery('#top').addClass('display');
}
else
{
jQuery('#top').removeClass('display');
}
});
</script>
Explaination :
1.When page is loaded at that time button should not be visible
->Scroll to top button is always in the corner side, so for doing that we have to appy css
right : 20 px:
bottom : -50 px;
- when we provide this at that time it put 20px space on right side and when page is loaded at that time we dont want visible it so bottom : -50 px will invisible button
->Now we want that button is always visible in corner if we sroll it down so for that we fixed the posion using
position : fixed;
2.When we scroll down it will be visible
-> "jQuery(window).scroll()" function is automatically call when we scroll down the page
-> in this we put condition that "jQuery(document).scrollTop() > 100"
-> if condition is true the we add the class display using
jQuery('#top').addClass('display');
-when "display" class is added its bottom css is chnaged and it become "bottom:20px" and it get visible
->For the in-out effect we use the transition as below
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;.
->Also button should be in front of all tag in html so for that put
z-index : 999;
3.and last when we click on it ,it redirect us to top and get invisible
->When we click on link button at that time following finction is called and it scroll to top.
jQuery('#top a').click(function () {
jQuery('html, body').animate({scrollTop: '0'}, 800);
return false;
});
->when it scroll up "jQuery(document).scrollTop() > 100" get false and it remove class so again button get invisible
Note : For button i use the "up.png" image file , you can use your own image or icon...
Comments
Post a Comment