recherche

Maison  >  Article  >  programmation quotidienne  >  Comment obtenir l'effet de cliquer sur la page Web pour revenir en haut dans jquery ? (Photos + Vidéos)

Comment obtenir l'effet de cliquer sur la page Web pour revenir en haut dans jquery ? (Photos + Vidéos)

藏色散人
藏色散人original
2018-10-13 13:53:486576parcourir

Cet article explique principalement comment utiliser le code jquery pour obtenir l'effet de renvoyer la page Web en haut.

Lorsque nous parcourons les pages des principaux sites Web, tout le monde doit l'avoir rencontré. Lors de la navigation sur une longue page, lorsque vous faites défiler vers la partie inférieure, un effet de bouton similaire au retour en haut apparaîtra.

Cet effet spécial consistant à revenir en haut peut grandement améliorer l'expérience utilisateur. Il est alors très simple de mettre en œuvre une telle fonction.

Ci-dessous, nous utiliserons un exemple de code simple pour vous présenter la méthode fonctionnelle d'utilisation de jquery pour revenir en haut . 

<!DOCTYPE html>
<html>
<head>
    <title>回到顶部特效</title>
    <meta charset="UTF-8">
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <style>
        body {
            text-align: center;
        }
        h1 {
            width: 1200px;
            height: 1500px;
            background: #eee;
            margin: 30px auto;
        }
        a {
            text-decoration: none;
            color: #fff;
        }
        p#back {
            text-align: center;
            position: fixed;
            bottom: 100px;
            right: 60px;
            background: #000;
            border-radius: 3px;
            height: 50px;
            width: 80px;
            display: none;
        }
    </style>
</head>
<body>
<h1>网页内容</h1>
<a href=""><p id="back"><br> 返回顶部</p></a>
</body>
<script>
    // 文档就绪
    $(function () {
        // 获取浏览器窗口
        $(window).scroll(function () {
            // 获取浏览器滚动条距离顶部的高度
            if ($(window).scrollTop() > 150) {
                // 设置按钮出现
                $(&#39;#back&#39;).fadeIn(1000)
            } else {
                // 设置按钮消失
                $(&#39;#back&#39;).fadeOut(1000)
            }
        })
    })
</script>
</html>

Dans ce code, nous avons principalement référencé une bibliothèque en ligne jquery et écrit quelques pages HTML simples et du code js pour juger lorsque la hauteur de la barre de défilement à partir du haut est supérieure à 150, puis définissez. Le bouton apparaît, sinon le bouton est masqué. Enfin, accédez-y via le navigateur, l'effet est le suivant :

Comment obtenir leffet de cliquer sur la page Web pour revenir en haut dans jquery ? (Photos + Vidéos)

Ensuite, nous faisons glisser la barre de défilement vers le bas, et le bouton pour revenir en haut apparaîtra lentement, le L'effet est le suivant :

Comment obtenir leffet de cliquer sur la page Web pour revenir en haut dans jquery ? (Photos + Vidéos)

Remarque :

fadeIn() La méthode utilise le fondu entrant effet pour afficher l'élément sélectionné, si l'élément est masqué. (Dans cet exemple, le paramètre est réglé sur 1000 millisecondes, ce qui signifie que le temps de transition en fondu de l'élément sélectionné est de 1000 millisecondes. S'il est réglé sur 0, l'élément sélectionné apparaîtra immédiatement.)

fadeOut() La méthode utilise l'effet de fondu pour masquer l'élément sélectionné, si l'élément est masqué. (Mêmes paramètres que ci-dessus)

Cet article concerne jquery pour implémenter l'effet de retour de la page Web en haut C'est simple et facile à comprendre. aux amis dans le besoin !

Si vous souhaitez en savoir plus sur les connaissances liées au front-end, vous pouvez suivre le site Web PHP chinois Tutoriel vidéo jQuery ou Tutoriel vidéo HTML, Vidéo CSS tutoriel, Tutoriel vidéo Bootstrap et autres didacticiels vidéo connexes, invitez tout le monde à se référer et à apprendre !

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!

php jquery css bootstrap html JS
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 obtenir l'effet d'agrandissement lent des images au survol de la souris en CSS3 (image, texte + vidéo) ?Article suivant：Comment obtenir l'effet d'agrandissement lent des images au survol de la souris en CSS3 (image, texte + vidéo) ?

Articles Liés

Voir plus