w3resource

jQuery: Scroll to the top of the page

jQuery Practical exercise Part - I : Exercise-2

Scroll to the top of the page with jQuery.

Sample solution :

HTML Code :

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <meta charset="utf-8">
  <title>Scroll to the top of the page with jQuery</title>
</head>
<body>
  <p>jquery</p>
  <p>jquery</p>
  <p>jquery</p>
  <p>jquery</p>
  <p>jquery</p>
  <p>jquery</p>
  <p>jquery</p>
  <p>jquery</p>
  <p>jquery</p>
  <p>jquery</p>
  <p>jquery</p>
  <p>jquery</p>
  <p>jquery</p>
  <p>jquery</p>
  <p>jquery</p>
  <p>jquery</p>
  <p>jquery</p>
  <p>jquery</p>
  <p>jquery</p>
  <p>jquery</p>
  <p>jquery</p>
  <p>jquery</p>
  <p>jquery</p>
  <p>jquery</p>
  <p>jquery</p>
  <p>jquery</p>
  <p>jquery</p>
  <p>jquery</p>
  <p>jquery</p>
  <p>jquery</p>
  <p>jquery</p>
  <p>jquery</p>
<a href='#top'>Go Top</a>  
</body>
</html>

JavaScript Code :

$("a[href='#top']").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});

See the Pen jquery-practical-exercise-2 by w3resource (@w3resource) on CodePen.


Contribute your code and comments through Disqus.

Previous: Test if jQuery is loaded.
Next: Disable right click menu in html page using jquery.

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.



Follow us on Facebook and Twitter for latest update.