Intoduction :-
Hii Friends...
Today I explain How To scroll from top to bottom and bottom to top, we use “scrollTop” function of jquery. In order to make the Scroll to Bottom action smooth,
Example :-
<img src="img/BackToTopArrow.png" class="on-click-scroll-page-image" title="Go To Top" />
<style>
.on-click-scroll-page-image
{
max-width:50px;
position:fixed;
cursor:pointer;
bottom:5px;
right:5px;
display:none;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function () {
$(window).scroll(function () {
if ($(window).scrollTop() > 10) {
$('.on-click-scroll-page-image').show();
}
else {
$('.on-click-scroll-page-image').hide();
}
});
$('.on-click-scroll-page-image').click(function () {
$("html, body").animate({ scrollTop: 0 }, 600);
return false;
});
});
</script>
Hii Friends...
Today I explain How To scroll from top to bottom and bottom to top, we use “scrollTop” function of jquery. In order to make the Scroll to Bottom action smooth,
jQuery animation has been used. The jQuery scrollTop property is used to set the position of the browser Scrollbar. The page is scrolled to Top or Bottom position
by setting the scrollTop property.Through this button, we can back to the top section from the bottom section of the web page without manual page scrolling.
Example :-
<img src="img/BackToTopArrow.png" class="on-click-scroll-page-image" title="Go To Top" />
<style>
.on-click-scroll-page-image
{
max-width:50px;
position:fixed;
cursor:pointer;
bottom:5px;
right:5px;
display:none;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function () {
$(window).scroll(function () {
if ($(window).scrollTop() > 10) {
$('.on-click-scroll-page-image').show();
}
else {
$('.on-click-scroll-page-image').hide();
}
});
$('.on-click-scroll-page-image').click(function () {
$("html, body").animate({ scrollTop: 0 }, 600);
return false;
});
});
</script>
