In this article, I will explain how to scroll to top
of the page using Jquery.
Description:
Jquery introduced the concept of smooth scrolling and it became very
popular day by day that lot of websites is using it.
Scrolling creates better effects to the visitors.
If we click on a link, the page smoothly scrolls down to a specific
section of content.
Smooth scrolling reduces efforts of visitors to scroll up to a specific
area of page, rather than doing this if we just click on a link jquery will
take care where the user wants to land.
The Jquery
function scrollTop() used to animate the page and scroll up or down to the
specific location.
If we want to scroll to the top of the page, we can use the following
code
$("html, body").animate({
scrollTop: 0 }, 4000);
If we want to scroll to the bottom of the page, we can use the following
code
$("html, body").animate({
scrollTop: $(document).height() }, 4000);
If we want to scroll to the particular section of the page, we can use
the following code
$('html, body').animate({scrollTop:
$(divID).offset().top }, 3000);
Example Program:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script
type="text/javascript">
$(document).ready(function () {
$("#btnScrollToTop").click(function () {
$("html,
body").animate({ scrollTop: 0 }, 4000);
return
false;
});
$("#btnScrollToBottom").click(function () {
$("html,
body").animate({ scrollTop: $(document).height() }, 4000);
return
false;
});
});
</script>
</head>
<body>
<form
id="form1"
runat="server">
<div>
<div>
<asp:Button ID="btnScrollToBottom" runat="server"
Text="Scroll To
Bottom" />
</div>
<asp:Image ID="Image1" src="Winter.jpg" runat="server" Height="1057px" Width="861px" />
<asp:Button ID="btnScrollToTop" runat="server" Text="Scroll To Top" />
</div>
</form>
</body>
</html>
-
0 comments:
Post a Comment