Maison >interface Web >Tutoriel H5 >Comment utiliser le lien

Comment utiliser le lien

不言
不言original
2018-11-06 15:05:403633parcourir

Avec l'avènement des sites Web d'une page, l'utilisation du défilement comme méthode de navigation sur de longues pages est devenue de plus en plus populaire. Cette petite partie est implémentée dans le code JS + jQuery et 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 que la balise d'ancrage soit ajoutée à la page lorsque JS n'est pas présent.

Coffeescript :

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

ou JS :

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

et quelques exemples de 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>

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Articles Liés

Voir plus