Saturday, July 28, 2018
Website Development Series Smooth Scrolling Navigation
Website Development Series Smooth Scrolling Navigation
How-To Enable Smooth Scrolling to an Anchor or ID on an HTML page.
To enable smooth scroll to an id or anchor on an HTML page you must first copy the code below into the <head> tag of you page. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(function() {
$(a[href*=#]:not([href=#])).click(function() {
if (location.pathname.replace(/^//,) == this.pathname.replace(/^//,) && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $([name= + this.hash.slice(1) +]);
if (target.length) {
$(html,body).animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
</script>
<script>
$(function() {
$(a[href*=#]:not([href=#])).click(function() {
if (location.pathname.replace(/^//,) == this.pathname.replace(/^//,) && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $([name= + this.hash.slice(1) +]);
if (target.length) {
$(html,body).animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
</script>
Once this code has been placed in you <head> tag any link that is linked to an id or anchor on that page, indicated by "#" before the name of the id will scroll smoothly, rather than bounce to the location of the ID or Anchor.
For more detailed instructions on how to create smooth scrolling navigation, watch the video below.
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.