Skip to content

Instantly share code, notes, and snippets.

@josuecau

josuecau/scroll-page.html

Last active August 29, 2015 14:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save josuecau/02d478fd33005497ec2b to your computer and use it in GitHub Desktop.
Save josuecau/02d478fd33005497ec2b to your computer and use it in GitHub Desktop.
Download ZIP
Smooth Scrolling To Internal Links With jQuery
Raw
scroll-page.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Scroll Page</title>
<style>
body { width: 600px; margin: 200px auto; }
</style>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function($) {
var $body = $('html, body');
// Scroll jusqu'à un élément
$('a[href*=#]:not([href=#])').click(function (e) {
e.preventDefault();
var hash = $(this).attr('href');
$body.stop().animate({
scrollTop: $(hash).offset().top
}, 'slow', function() {
window.location.hash = hash;
});
});
// Remonte la page
$('#top').click(function (e) {
$body.animate({
scrollTop: 0
}, 'slow', function () {
window.location.hash = '';
});
});
});
</script>
</head>
<body>
<ul id="menu">
<li><a href="#section-1">Section 1</a></li>
<li><a href="#section-2">Section 2</a></li>
<li><a href="#section-3">Section 3</a></li>
<li><a href="#section-4">Section 4</a></li>
<li><a href="#section-5">Section 5</a></li>
</ul>
<section id="section-1">
<h2>Section 1</h2>
<p>Sit nihil unde voluptate quod dolore quod alias. Et ea cumque natus in vitae perspiciatis. Consequatur eos voluptate repudiandae harum vel. Reprehenderit fugit ipsam ex enim repudiandae id odio vero?</p>
<p>Adipisicing dolore aspernatur totam a ipsam eius. Consequatur odio aliquam dolorem perferendis saepe. Obcaecati ex et dolorum et distinctio voluptatibus! Id vero molestias magni illum molestias explicabo at. Adipisci praesentium.</p>
<p>Dolor odio ipsum nulla aut enim? Beatae eaque repellendus repellat voluptatem dicta laboriosam. Totam ad assumenda nesciunt sit fuga libero rerum corporis. Sed ad mollitia fugit autem magni! Eum animi.</p>
<p>Sit nihil unde voluptate quod dolore quod alias. Et ea cumque natus in vitae perspiciatis. Consequatur eos voluptate repudiandae harum vel. Reprehenderit fugit ipsam ex enim repudiandae id odio vero?</p>
<p>Adipisicing dolore aspernatur totam a ipsam eius. Consequatur odio aliquam dolorem perferendis saepe. Obcaecati ex et dolorum et distinctio voluptatibus! Id vero molestias magni illum molestias explicabo at. Adipisci praesentium.</p>
<p>Dolor odio ipsum nulla aut enim? Beatae eaque repellendus repellat voluptatem dicta laboriosam. Totam ad assumenda nesciunt sit fuga libero rerum corporis. Sed ad mollitia fugit autem magni! Eum animi.</p>
</section>
<section id="section-2">
<h2>Section 2</h2>
<p>Sit nihil unde voluptate quod dolore quod alias. Et ea cumque natus in vitae perspiciatis. Consequatur eos voluptate repudiandae harum vel. Reprehenderit fugit ipsam ex enim repudiandae id odio vero?</p>
<p>Adipisicing dolore aspernatur totam a ipsam eius. Consequatur odio aliquam dolorem perferendis saepe. Obcaecati ex et dolorum et distinctio voluptatibus! Id vero molestias magni illum molestias explicabo at. Adipisci praesentium.</p>
<p>Dolor odio ipsum nulla aut enim? Beatae eaque repellendus repellat voluptatem dicta laboriosam. Totam ad assumenda nesciunt sit fuga libero rerum corporis. Sed ad mollitia fugit autem magni! Eum animi.</p>
<p>Sit nihil unde voluptate quod dolore quod alias. Et ea cumque natus in vitae perspiciatis. Consequatur eos voluptate repudiandae harum vel. Reprehenderit fugit ipsam ex enim repudiandae id odio vero?</p>
<p>Adipisicing dolore aspernatur totam a ipsam eius. Consequatur odio aliquam dolorem perferendis saepe. Obcaecati ex et dolorum et distinctio voluptatibus! Id vero molestias magni illum molestias explicabo at. Adipisci praesentium.</p>
<p>Dolor odio ipsum nulla aut enim? Beatae eaque repellendus repellat voluptatem dicta laboriosam. Totam ad assumenda nesciunt sit fuga libero rerum corporis. Sed ad mollitia fugit autem magni! Eum animi.</p>
</section>
<section id="section-3">
<h2>Section 3</h2>
<p>Sit nihil unde voluptate quod dolore quod alias. Et ea cumque natus in vitae perspiciatis. Consequatur eos voluptate repudiandae harum vel. Reprehenderit fugit ipsam ex enim repudiandae id odio vero?</p>
<p>Adipisicing dolore aspernatur totam a ipsam eius. Consequatur odio aliquam dolorem perferendis saepe. Obcaecati ex et dolorum et distinctio voluptatibus! Id vero molestias magni illum molestias explicabo at. Adipisci praesentium.</p>
<p>Dolor odio ipsum nulla aut enim? Beatae eaque repellendus repellat voluptatem dicta laboriosam. Totam ad assumenda nesciunt sit fuga libero rerum corporis. Sed ad mollitia fugit autem magni! Eum animi.</p>
<p>Sit nihil unde voluptate quod dolore quod alias. Et ea cumque natus in vitae perspiciatis. Consequatur eos voluptate repudiandae harum vel. Reprehenderit fugit ipsam ex enim repudiandae id odio vero?</p>
<p>Adipisicing dolore aspernatur totam a ipsam eius. Consequatur odio aliquam dolorem perferendis saepe. Obcaecati ex et dolorum et distinctio voluptatibus! Id vero molestias magni illum molestias explicabo at. Adipisci praesentium.</p>
<p>Dolor odio ipsum nulla aut enim? Beatae eaque repellendus repellat voluptatem dicta laboriosam. Totam ad assumenda nesciunt sit fuga libero rerum corporis. Sed ad mollitia fugit autem magni! Eum animi.</p>
</section>
<section id="section-4">
<h2>Section 4</h2>
<p>Sit nihil unde voluptate quod dolore quod alias. Et ea cumque natus in vitae perspiciatis. Consequatur eos voluptate repudiandae harum vel. Reprehenderit fugit ipsam ex enim repudiandae id odio vero?</p>
<p>Adipisicing dolore aspernatur totam a ipsam eius. Consequatur odio aliquam dolorem perferendis saepe. Obcaecati ex et dolorum et distinctio voluptatibus! Id vero molestias magni illum molestias explicabo at. Adipisci praesentium.</p>
<p>Dolor odio ipsum nulla aut enim? Beatae eaque repellendus repellat voluptatem dicta laboriosam. Totam ad assumenda nesciunt sit fuga libero rerum corporis. Sed ad mollitia fugit autem magni! Eum animi.</p>
<p>Sit nihil unde voluptate quod dolore quod alias. Et ea cumque natus in vitae perspiciatis. Consequatur eos voluptate repudiandae harum vel. Reprehenderit fugit ipsam ex enim repudiandae id odio vero?</p>
<p>Adipisicing dolore aspernatur totam a ipsam eius. Consequatur odio aliquam dolorem perferendis saepe. Obcaecati ex et dolorum et distinctio voluptatibus! Id vero molestias magni illum molestias explicabo at. Adipisci praesentium.</p>
<p>Dolor odio ipsum nulla aut enim? Beatae eaque repellendus repellat voluptatem dicta laboriosam. Totam ad assumenda nesciunt sit fuga libero rerum corporis. Sed ad mollitia fugit autem magni! Eum animi.</p>
</section>
<section id="section-5">
<h2>Section 5</h2>
<p>Sit nihil unde voluptate quod dolore quod alias. Et ea cumque natus in vitae perspiciatis. Consequatur eos voluptate repudiandae harum vel. Reprehenderit fugit ipsam ex enim repudiandae id odio vero?</p>
<p>Adipisicing dolore aspernatur totam a ipsam eius. Consequatur odio aliquam dolorem perferendis saepe. Obcaecati ex et dolorum et distinctio voluptatibus! Id vero molestias magni illum molestias explicabo at. Adipisci praesentium.</p>
<p>Dolor odio ipsum nulla aut enim? Beatae eaque repellendus repellat voluptatem dicta laboriosam. Totam ad assumenda nesciunt sit fuga libero rerum corporis. Sed ad mollitia fugit autem magni! Eum animi.</p>
<p>Sit nihil unde voluptate quod dolore quod alias. Et ea cumque natus in vitae perspiciatis. Consequatur eos voluptate repudiandae harum vel. Reprehenderit fugit ipsam ex enim repudiandae id odio vero?</p>
<p>Adipisicing dolore aspernatur totam a ipsam eius. Consequatur odio aliquam dolorem perferendis saepe. Obcaecati ex et dolorum et distinctio voluptatibus! Id vero molestias magni illum molestias explicabo at. Adipisci praesentium.</p>
<p>Dolor odio ipsum nulla aut enim? Beatae eaque repellendus repellat voluptatem dicta laboriosam. Totam ad assumenda nesciunt sit fuga libero rerum corporis. Sed ad mollitia fugit autem magni! Eum animi.</p>
</section>
<p><a id="top" href="#">Remonter la page</a></p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment