Maison > Article > interface Web > Comment faire défiler rapidement vers le haut de la page avec jQuery

Comment faire défiler rapidement vers le haut de la page avec jQuery

coldplay.xixioriginal: 2020-12-17 14:53:143416parcourir

Comment faire défiler rapidement vers le haut de la page avec jQuery : utilisez la méthode [scrollTo()] pour faire défiler rapidement vers le haut de la page. Définir le paramètre de position sur 0 fera défiler la page vers le haut. . La syntaxe est [$(window).scrollTop (position);].

L'environnement d'exploitation de ce tutoriel : système windows7, version jquery3.2.1, cette méthode convient à toutes les marques d'ordinateurs.

Recommandé : Tutoriel vidéo jquery

Comment faire défiler rapidement vers le haut de la page avec jQuery :

ScrollTo peut être utilisé dans la méthode jQuery () défile rapidement vers le haut de la page. La méthode scrollTo() de jQuery est utilisée pour définir ou renvoyer la position de la barre de défilement verticale de l'élément sélectionné. Vous pouvez utiliser ce comportement pour faire défiler vers le haut de la page en appliquant cette méthode sur la propriété window ; il suffit de définir le paramètre position sur 0 pour faire défiler la page vers le haut.

Syntaxe :

$(window).scrollTop(position);

Exemple :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
    .scroll {
        height: 1000px;
        background-color: palegoldenrod;
    }
</style>
</head>
<h2>使用jQuery快速滚动到页面顶部</h2>
    <p>单击下面的按钮，滚动到页面顶部</p>
    <p class="scroll">这里一段测试文本！这里一段测试文本！这里一段测试文本！</p>
    <button onclick="scrollToTop()">单击，滚动到顶部</button>
    <script src= "https://code.jquery.com/jquery-3.3.1.min.js"> </script>
    <script>
        function scrollToTop() {
            $(window).scrollTop(0);
        }
    </script>
</body>
</html>

En bas de page, avant de cliquer sur le bouton :

Comment faire défiler rapidement vers le haut de la page avec jQuery

Cliquer sur le bouton Après :

Comment faire défiler rapidement vers le haut de la page avec jQuery

Recommandations d'apprentissage gratuites associées : Tutoriel d'apprentissage javascript

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

Article précédent：Comment utiliser la bascule dans jqueryArticle suivant：Comment utiliser la bascule dans jquery

Articles Liés

Voir plus