[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 283
  • Last Modified:

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.
<!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>

Open in new window

0
hankknight
Asked:
hankknight
1 Solution
 
FrankoHCommented:
I usually animate this effect as below:

$('html, body').animate({scrollTop:0}, 'slow');
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now