How to use link to scroll to a certain part of the page

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

link to scroll to a certain part of the page. For more information, please follow other related articles on the PHP Chinese website!