Jquery smooth window scroll

Posted: July 8, 2011 in PHP
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script language="javascript">
$(document).ready(function () {
$('html,body').animate({scrollTop: $('#middleButton').offset().top}, 2000);
});
</script>
middle

</head>

<body>

<p id="scrolltest" style="padding-top: 15px;">
<input type="button" style="border: 1px solid rgb(51, 51, 51); background-color: rgb(102, 102, 102); color: rgb(255, 255, 255);" value="Click here to scroll down" onclick="$('html,body').animate({scrollTop: $('#scrollDown').offset().top}, 2000);">
</p>

content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />

content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />
<span style="padding-top: 15px;">


<input id="middleButton" type="button" style="border: 1px solid rgb(51, 51, 51); background-color: rgb(102, 102, 102); color: rgb(255, 255, 255);" value="this is middle"  />


</span><br />
content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />

content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />content is here <br />

<p id="scrollDown">
Here is something to try:<br>
<input type="button" style="border: 1px solid rgb(51, 51, 51); background-color: rgb(102, 102, 102); color: rgb(255, 255, 255);" value="Click here to scroll up" onclick="$('html,body').animate({scrollTop: $('#scrolltest').offset().top}, 2000);">
</p>
</body>
</html>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s