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,
C# JADU
C# JADU Go To Top
<head>
<style>
.on-click-scroll-page-image
{
max-width:50px;
position:fixed;
cursor:pointer;
bottom:10px;
right:10px;
display:none;
}
</style>
<script src="https://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>
</head>
<body>
<p>C# JADU<p>
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.
DEMO : Please see the bottom of the page it will visible when you scroll down.
C# JADU
C# JADU Go To Top
Example :-
<html><head>
<style>
.on-click-scroll-page-image
{
max-width:50px;
position:fixed;
cursor:pointer;
bottom:10px;
right:10px;
display:none;
}
</style>
<script src="https://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>
</head>
<body>
<p>C# JADU<p>
<br/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvDYNWUMqSCAUcQnqz_zD816SaSOcBOAShkyS6G2r_nu1dyP8CdWFsak6PGKfxmlKMPtfTYOHNss8kWqVejx9OXru38tS9C9Hpz9W7EhbYLg_8g3D0a6vvewkiEOIrascJV5VtuFkdN9fQ/w140-h67-p/finalc%2523logoPNGupdated.png "> <br />
<p>C# JADU<p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvDYNWUMqSCAUcQnqz_zD816SaSOcBOAShkyS6G2r_nu1dyP8CdWFsak6PGKfxmlKMPtfTYOHNss8kWqVejx9OXru38tS9C9Hpz9W7EhbYLg_8g3D0a6vvewkiEOIrascJV5VtuFkdN9fQ/w140-h67-p/finalc%2523logoPNGupdated.png "> <br />
<a href="#" class="on-click-scroll-page-image">Go To Top </a>
</body>
</html>
</body>
</html>
http://dotnetmodules.blogspot.in/2017/01/how-to-scroll-from-bottom-to-top.html
ReplyDeletefor more examples go here..