If you want to create page jumps with anchor link code, you will need these two elements:
- The link
- The target
Example:
- Create the Link:
<a name="youlinktext">yourlinktext</a>
and link to the Target:
<a href="#yourlinktext">go to your link text</a>
- Link to div tag with id:
<div id="#yourlinkname">
- Linking to the Top of the Page:
Add the “target code” at the very top of your page:
<a name="toppage"></a>
And then put the following link code at the bottom of the page with "#"
<a href="#toppage">Top</a>
- Link to different page
<a href="../yourURL/#yourlinkname">Go To Next Page</a>
To get Smooth Page Scroll Effect, you may put the following jquery code right before body tag:
<!-- Start SMOOTH PAGE SCROLL -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.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>
<!-- End SMOOTH PAGE SCROLL -->
Credit: Jquery code snippets by Chris Coyier and here is example on codepen: http://codepen.io/chriscoyier/pen/dpBMVP