With the advent of one-page websites, using scrolling as a method of navigating long pages has become increasingly popular. This small part is implemented in JS jQuery code and you can easily set links in nav elements to scroll to the corresponding part of the page. If you want the anchor tag to be added to the page when JS is not present.
Coffeescript:
$("nav").find("a").click (e) -> e.preventDefault() section = $(this).attr "href" $("html, body").animate scrollTop: $(section).offset().top
or JS:
$("nav").find("a").click(function(e) { e.preventDefault(); var section = $(this).attr("href"); $("html, body").animate({ scrollTop: $(section).offset().top });});
and some sample HTML
<nav> <a href="#welcome">Welcome</a> <a href="#about">About</a> <a href="#section3">Section 3</a> </nav> <div id="welcome">Welcome to this website</div> <div id="about">About this website, and such</div> <div id="section3">The third section</div>
The above is the detailed content of How to use