Utilisez les liens pour faire défiler jusqu'à la partie appropriée de la page

Avec l'avènement des pages de sites Web, l'utilisation du défilement comme méthode de navigation dans de longues pages est devenue de plus en plus populaire. En utilisant le code JS + jQuery, vous pouvez facilement définir des liens dans les éléments de navigation pour faire défiler vers la partie correspondante de la page. Si vous souhaitez bien vous dégrader lorsque JS n'existe pas, veuillez ajouter des balises d'ancrage à la page. Cet article vous présentera l'utilisation des liens

Voici le code spécifique

Coffeescript :

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

ou code JS :

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

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

Cet article est terminé ici Pour un contenu plus passionnant, vous pouvez faire attention à la colonne Tutoriel vidéo HTML du site Web PHP chinois ! ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!