Use links to scroll to the appropriate part of the page

With the advent of website pages, using scrolling as a method of navigating long pages has become increasingly popular. Using JS jQuery code, you can easily set links in nav elements to scroll to the corresponding part of the page. If you want to degrade well when JS does not exist, please add anchor tags to the page. This article will introduce to you about using

links to scroll to the corresponding part of the page.

The following is the specific code

Coffeescript:

$("nav").find("a").click (e) ->
    e.preventDefault()
    section = $(this).attr "href"
    $("html, body").animate
    scrollTop: $(section).offset().top

or JS code:

$("nav").find("a").click(function(e) {
    e.preventDefault();
    var section = $(this).attr("href");
    $("html, body").animate({
        scrollTop: $(section).offset().top
    });
});

HTML Code:

<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>

This article has ended here. For more exciting content, you can pay attention to the HTML Video Tutorial column on the PHP Chinese website! ! !

The above is the detailed content of Use

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