In this article, I will explain how to scroll to
particular position 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 id="Head1" runat="server">
<title>Smooth Scrolling Div
using Jquery</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#DivOne').click(function () {
var divID = '#FirstDiv';
$('html, body').animate({
scrollTop: $(divID).offset().top
}, 3000);
});
$('#DivTwo').click(function () {
var divID = '#SecondDiv';
$('html, body').animate({
scrollTop: $(divID).offset().top
}, 3000);
});
$('#DivThree').click(function () {
var divID = '#ThirdDiv';
$('html, body').animate({
scrollTop: $(divID).offset().top
}, 3000);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<a href="#" id="DivOne">Go to Div One</a>
<a href="#" id="DivTwo">Go
to Div Two</a>
<a href="#" id="DivThree">Go to Div Three</a>
<div id="FirstDiv">
<h1>
First Div</h1>
Add some Sample Paragraph here
<br />
</div>
<div id="SecondDiv">
<h1>
Second Div</h1>
Add some Sample Paragraph here
<br />
</div>
<div id="ThirdDiv">
<h1>
Third Div</h1>
Add some Sample Paragraph here
<br />
</div>
</div>
</form>
</body>
</html>
From the above example, we can smoothly scroll to particular div based on
the link click event.
No comments:
Post a Comment