" Live as if you were to die tomorrow. Learn as if you were to live forever.. "
- Mahatma Gandhi
" Live as if you were to die tomorrow. Learn as if you were to live forever.. "
- Mahatma Gandhi
For scrolling to the top of the document , we can write a javascript like :
window.scrollTo(0,0);
But its transition effect is left visible . If we want a smooth animation to show the scrolling , we can use the following jQuery code :
$(‘html,body’).animate({ ScrollTop: 0 }, 1000);
In order to scroll “hml/body” you can use the animate method. Use “ScrollTop” parameter to specify the position to scroll to. In the above instance 1000 is the time duration of the animation.
If we want to scroll to specified element position . Then we can use :
$(‘html,body’).animate({ scrollTop: $(“#divContainer”).offset().top }, 1000);
In the above line of code , the scroll will move to the position of the “div-container” element.
Sample Code
Copy paste the following sample code , save with html extension and run.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" >
function ScrollToBottom() {
$('html,body').animate({
scrollTop: $('#btnScrollToTop').offset().top}, 2000);
}
function ScrollToPositionA() {
$('html,body').animate({
scrollTop: $('#btnScrollBottom').offset().top}, 1000);
}
function ScrollToTop() {
$('html,body').animate({scrollTop: 0}, 2000);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<p> </p><p> </p><p> </p>
<p> </p><p> </p>
<p> </p><p> </p><p> </p>
<p> </p><p> </p><p> </p>
Position A <input type="button" id="btnScrollBottom" value="Scroll to bottom" onclick="ScrollToBottom()" />
<p> </p><p> </p><p> </p><p> </p>
<p> </p><p> </p>
<p> </p><p> </p><p> </p>
<p> </p><p> </p><p> </p>
<p> </p><p> </p><p> </p>
<p> </p><p> </p><p> </p><p> </p>
<input type="button" id="btnScrollPositionA" value="Scroll to position A" onclick="ScrollToPositionA()" />
<input type="button" id="btnScrollToTop" value="Scroll to top" onclick="ScrollToTop()" />
</div>
</form>
</body>
</html>