JavaScript / jQuery: position document to top when link clicked
Using JavaScript / jQuery, how can I get the document to be positioned at the very top when a link is clicked?
In the example below, if you click on the links at the bottom, the document should be positioned to the very top.
In the example below, if you click on the links at the bottom, the document should be positioned to the very top.
<!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>Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a').click(function () {
$('h1').first().html('You selected ' + $(this).attr('href') );
scroll(0,0);
alert('The document should be positioned at the very top of the window!\nscroll(0,0)\ndoes NOT work!');
});
});
</script>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
font-family: arial, heltetica, sans-serif;
font-size: 20px;
background: #fff;
width: 100%;
height: 100%;
min-height: 100%;
}
html {
overflow-y: hidden;
}
body {
overflow-y: scroll;
}
h1 {
padding: 30px 20px 0 20px;
color: red;
}
h2 {
padding: 30px 20px 0 20px;
}
p {
padding: 10px 20px 20px 20px;
}
</style>
</head>
<body>
<h1></h1>
<h2 id="item1">Item 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin malesuada tincidunt convallis. In in lectus eu nunc eleifend pharetra vel sit amet mi. In condimentum, odio ac commodo auctor, libero massa tempus purus, porta posuere sapien tellus ut ante. Curabitur varius lobortis viverra. Praesent eu tristique metus. Aliquam gravida, velit sed iaculis venenatis, odio turpis egestas urna, eget aliquam dolor magna id purus. Quisque tristique malesuada rhoncus. Aenean faucibus accumsan lorem sed hendrerit. Cras eleifend aliquam posuere. Pellentesque nisl quam, vulputate ut commodo vitae, fermentum ac nunc. Curabitur consectetur justo non risus malesuada ut ullamcorper enim auctor. Pellentesque id enim nec tellus dictum ultrices. Sed sit amet dignissim arcu. Suspendisse sollicitudin ullamcorper pharetra. Donec imperdiet venenatis pretium.</p>
<h2 id="item2">Item 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin malesuada tincidunt convallis. In in lectus eu nunc eleifend pharetra vel sit amet mi. In condimentum, odio ac commodo auctor, libero massa tempus purus, porta posuere sapien tellus ut ante. Curabitur varius lobortis viverra. Praesent eu tristique metus. Aliquam gravida, velit sed iaculis venenatis, odio turpis egestas urna, eget aliquam dolor magna id purus. Quisque tristique malesuada rhoncus. Aenean faucibus accumsan lorem sed hendrerit. Cras eleifend aliquam posuere. Pellentesque nisl quam, vulputate ut commodo vitae, fermentum ac nunc. Curabitur consectetur justo non risus malesuada ut ullamcorper enim auctor. Pellentesque id enim nec tellus dictum ultrices. Sed sit amet dignissim arcu. Suspendisse sollicitudin ullamcorper pharetra. Donec imperdiet venenatis pretium.</p>
<h2 id="item3">Item 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin malesuada tincidunt convallis. In in lectus eu nunc eleifend pharetra vel sit amet mi. In condimentum, odio ac commodo auctor, libero massa tempus purus, porta posuere sapien tellus ut ante. Curabitur varius lobortis viverra. Praesent eu tristique metus. Aliquam gravida, velit sed iaculis venenatis, odio turpis egestas urna, eget aliquam dolor magna id purus. Quisque tristique malesuada rhoncus. Aenean faucibus accumsan lorem sed hendrerit. Cras eleifend aliquam posuere. Pellentesque nisl quam, vulputate ut commodo vitae, fermentum ac nunc. Curabitur consectetur justo non risus malesuada ut ullamcorper enim auctor. Pellentesque id enim nec tellus dictum ultrices. Sed sit amet dignissim arcu. Suspendisse sollicitudin ullamcorper pharetra. Donec imperdiet venenatis pretium.</p>
<h2 id="item4">Item 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin malesuada tincidunt convallis. In in lectus eu nunc eleifend pharetra vel sit amet mi. In condimentum, odio ac commodo auctor, libero massa tempus purus, porta posuere sapien tellus ut ante. Curabitur varius lobortis viverra. Praesent eu tristique metus. Aliquam gravida, velit sed iaculis venenatis, odio turpis egestas urna, eget aliquam dolor magna id purus. Quisque tristique malesuada rhoncus. Aenean faucibus accumsan lorem sed hendrerit. Cras eleifend aliquam posuere. Pellentesque nisl quam, vulputate ut commodo vitae, fermentum ac nunc. Curabitur consectetur justo non risus malesuada ut ullamcorper enim auctor. Pellentesque id enim nec tellus dictum ultrices. Sed sit amet dignissim arcu. Suspendisse sollicitudin ullamcorper pharetra. Donec imperdiet venenatis pretium.</p>
<h2 id="item5">Item 5</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin malesuada tincidunt convallis. In in lectus eu nunc eleifend pharetra vel sit amet mi. In condimentum, odio ac commodo auctor, libero massa tempus purus, porta posuere sapien tellus ut ante. Curabitur varius lobortis viverra. Praesent eu tristique metus. Aliquam gravida, velit sed iaculis venenatis, odio turpis egestas urna, eget aliquam dolor magna id purus. Quisque tristique malesuada rhoncus. Aenean faucibus accumsan lorem sed hendrerit. Cras eleifend aliquam posuere. Pellentesque nisl quam, vulputate ut commodo vitae, fermentum ac nunc. Curabitur consectetur justo non risus malesuada ut ullamcorper enim auctor. Pellentesque id enim nec tellus dictum ultrices. Sed sit amet dignissim arcu. Suspendisse sollicitudin ullamcorper pharetra. Donec imperdiet venenatis pretium.</p>
<h2 id="item6">Item 6</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin malesuada tincidunt convallis. In in lectus eu nunc eleifend pharetra vel sit amet mi. In condimentum, odio ac commodo auctor, libero massa tempus purus, porta posuere sapien tellus ut ante. Curabitur varius lobortis viverra. Praesent eu tristique metus. Aliquam gravida, velit sed iaculis venenatis, odio turpis egestas urna, eget aliquam dolor magna id purus. Quisque tristique malesuada rhoncus. Aenean faucibus accumsan lorem sed hendrerit. Cras eleifend aliquam posuere. Pellentesque nisl quam, vulputate ut commodo vitae, fermentum ac nunc. Curabitur consectetur justo non risus malesuada ut ullamcorper enim auctor. Pellentesque id enim nec tellus dictum ultrices. Sed sit amet dignissim arcu. Suspendisse sollicitudin ullamcorper pharetra. Donec imperdiet venenatis pretium.</p>
<h2 id="item7">Item 7</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin malesuada tincidunt convallis. In in lectus eu nunc eleifend pharetra vel sit amet mi. In condimentum, odio ac commodo auctor, libero massa tempus purus, porta posuere sapien tellus ut ante. Curabitur varius lobortis viverra. Praesent eu tristique metus. Aliquam gravida, velit sed iaculis venenatis, odio turpis egestas urna, eget aliquam dolor magna id purus. Quisque tristique malesuada rhoncus. Aenean faucibus accumsan lorem sed hendrerit. Cras eleifend aliquam posuere. Pellentesque nisl quam, vulputate ut commodo vitae, fermentum ac nunc. Curabitur consectetur justo non risus malesuada ut ullamcorper enim auctor. Pellentesque id enim nec tellus dictum ultrices. Sed sit amet dignissim arcu. Suspendisse sollicitudin ullamcorper pharetra. Donec imperdiet venenatis pretium.</p>
<h2 id="item8">Item 8</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin malesuada tincidunt convallis. In in lectus eu nunc eleifend pharetra vel sit amet mi. In condimentum, odio ac commodo auctor, libero massa tempus purus, porta posuere sapien tellus ut ante. Curabitur varius lobortis viverra. Praesent eu tristique metus. Aliquam gravida, velit sed iaculis venenatis, odio turpis egestas urna, eget aliquam dolor magna id purus. Quisque tristique malesuada rhoncus. Aenean faucibus accumsan lorem sed hendrerit. Cras eleifend aliquam posuere. Pellentesque nisl quam, vulputate ut commodo vitae, fermentum ac nunc. Curabitur consectetur justo non risus malesuada ut ullamcorper enim auctor. Pellentesque id enim nec tellus dictum ultrices. Sed sit amet dignissim arcu. Suspendisse sollicitudin ullamcorper pharetra. Donec imperdiet venenatis pretium.</p>
<h2 id="item9">Item 9</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin malesuada tincidunt convallis. In in lectus eu nunc eleifend pharetra vel sit amet mi. In condimentum, odio ac commodo auctor, libero massa tempus purus, porta posuere sapien tellus ut ante. Curabitur varius lobortis viverra. Praesent eu tristique metus. Aliquam gravida, velit sed iaculis venenatis, odio turpis egestas urna, eget aliquam dolor magna id purus. Quisque tristique malesuada rhoncus. Aenean faucibus accumsan lorem sed hendrerit. Cras eleifend aliquam posuere. Pellentesque nisl quam, vulputate ut commodo vitae, fermentum ac nunc. Curabitur consectetur justo non risus malesuada ut ullamcorper enim auctor. Pellentesque id enim nec tellus dictum ultrices. Sed sit amet dignissim arcu. Suspendisse sollicitudin ullamcorper pharetra. Donec imperdiet venenatis pretium.</p>
<h2 id="item10">Item 10</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin malesuada tincidunt convallis. In in lectus eu nunc eleifend pharetra vel sit amet mi. In condimentum, odio ac commodo auctor, libero massa tempus purus, porta posuere sapien tellus ut ante. Curabitur varius lobortis viverra. Praesent eu tristique metus. Aliquam gravida, velit sed iaculis venenatis, odio turpis egestas urna, eget aliquam dolor magna id purus. Quisque tristique malesuada rhoncus. Aenean faucibus accumsan lorem sed hendrerit. Cras eleifend aliquam posuere. Pellentesque nisl quam, vulputate ut commodo vitae, fermentum ac nunc. Curabitur consectetur justo non risus malesuada ut ullamcorper enim auctor. Pellentesque id enim nec tellus dictum ultrices. Sed sit amet dignissim arcu. Suspendisse sollicitudin ullamcorper pharetra. Donec imperdiet venenatis pretium.</p>
<h2 id="item11">Item 11</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin malesuada tincidunt convallis. In in lectus eu nunc eleifend pharetra vel sit amet mi. In condimentum, odio ac commodo auctor, libero massa tempus purus, porta posuere sapien tellus ut ante. Curabitur varius lobortis viverra. Praesent eu tristique metus. Aliquam gravida, velit sed iaculis venenatis, odio turpis egestas urna, eget aliquam dolor magna id purus. Quisque tristique malesuada rhoncus. Aenean faucibus accumsan lorem sed hendrerit. Cras eleifend aliquam posuere. Pellentesque nisl quam, vulputate ut commodo vitae, fermentum ac nunc. Curabitur consectetur justo non risus malesuada ut ullamcorper enim auctor. Pellentesque id enim nec tellus dictum ultrices. Sed sit amet dignissim arcu. Suspendisse sollicitudin ullamcorper pharetra. Donec imperdiet venenatis pretium.</p>
<h2 id="item12">Item 12</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin malesuada tincidunt convallis. In in lectus eu nunc eleifend pharetra vel sit amet mi. In condimentum, odio ac commodo auctor, libero massa tempus purus, porta posuere sapien tellus ut ante. Curabitur varius lobortis viverra. Praesent eu tristique metus. Aliquam gravida, velit sed iaculis venenatis, odio turpis egestas urna, eget aliquam dolor magna id purus. Quisque tristique malesuada rhoncus. Aenean faucibus accumsan lorem sed hendrerit. Cras eleifend aliquam posuere. Pellentesque nisl quam, vulputate ut commodo vitae, fermentum ac nunc. Curabitur consectetur justo non risus malesuada ut ullamcorper enim auctor. Pellentesque id enim nec tellus dictum ultrices. Sed sit amet dignissim arcu. Suspendisse sollicitudin ullamcorper pharetra. Donec imperdiet venenatis pretium.</p>
<h2 id="item13">Item 13</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin malesuada tincidunt convallis. In in lectus eu nunc eleifend pharetra vel sit amet mi. In condimentum, odio ac commodo auctor, libero massa tempus purus, porta posuere sapien tellus ut ante. Curabitur varius lobortis viverra. Praesent eu tristique metus. Aliquam gravida, velit sed iaculis venenatis, odio turpis egestas urna, eget aliquam dolor magna id purus. Quisque tristique malesuada rhoncus. Aenean faucibus accumsan lorem sed hendrerit. Cras eleifend aliquam posuere. Pellentesque nisl quam, vulputate ut commodo vitae, fermentum ac nunc. Curabitur consectetur justo non risus malesuada ut ullamcorper enim auctor. Pellentesque id enim nec tellus dictum ultrices. Sed sit amet dignissim arcu. Suspendisse sollicitudin ullamcorper pharetra. Donec imperdiet venenatis pretium.</p>
<h2 id="item14">Item 14</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin malesuada tincidunt convallis. In in lectus eu nunc eleifend pharetra vel sit amet mi. In condimentum, odio ac commodo auctor, libero massa tempus purus, porta posuere sapien tellus ut ante. Curabitur varius lobortis viverra. Praesent eu tristique metus. Aliquam gravida, velit sed iaculis venenatis, odio turpis egestas urna, eget aliquam dolor magna id purus. Quisque tristique malesuada rhoncus. Aenean faucibus accumsan lorem sed hendrerit. Cras eleifend aliquam posuere. Pellentesque nisl quam, vulputate ut commodo vitae, fermentum ac nunc. Curabitur consectetur justo non risus malesuada ut ullamcorper enim auctor. Pellentesque id enim nec tellus dictum ultrices. Sed sit amet dignissim arcu. Suspendisse sollicitudin ullamcorper pharetra. Donec imperdiet venenatis pretium.</p>
<h2 id="item15">Item 15</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin malesuada tincidunt convallis. In in lectus eu nunc eleifend pharetra vel sit amet mi. In condimentum, odio ac commodo auctor, libero massa tempus purus, porta posuere sapien tellus ut ante. Curabitur varius lobortis viverra. Praesent eu tristique metus. Aliquam gravida, velit sed iaculis venenatis, odio turpis egestas urna, eget aliquam dolor magna id purus. Quisque tristique malesuada rhoncus. Aenean faucibus accumsan lorem sed hendrerit. Cras eleifend aliquam posuere. Pellentesque nisl quam, vulputate ut commodo vitae, fermentum ac nunc. Curabitur consectetur justo non risus malesuada ut ullamcorper enim auctor. Pellentesque id enim nec tellus dictum ultrices. Sed sit amet dignissim arcu. Suspendisse sollicitudin ullamcorper pharetra. Donec imperdiet venenatis pretium.</p>
<div>
<a href="#item1">Item 1</a>
<a href="#item2">Item 2</a>
<a href="#item3">Item 3</a>
<a href="#item4">Item 4</a>
<a href="#item5">Item 5</a>
<a href="#item6">Item 6</a>
<a href="#item7">Item 7</a>
<a href="#item8">Item 8</a>
<a href="#item9">Item 9</a>
<a href="#item10">Item 10</a>
<a href="#item11">Item 11</a>
<a href="#item12">Item 12</a>
<a href="#item13">Item 13</a>
<a href="#item14">Item 14</a>
<a href="#item15">Item 15</a>
</div>
</body>
</html>ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.