Cet article vous présentera comment utiliser JS natif pour obtenir l'effet de retour au sommet. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.
J'ai récemment regardé un tutoriel de cas en ligne - retour au premier effet (implémentation native de js). Comme cet effet est plus pratique et pas difficile, je l'ai implémenté une fois après l'avoir lu. L'effet n'était pas mauvais, j'ai donc pris des notes au cas où j'en aurais besoin !
1 |
|
Cette balise a est utilisée pour implémenter le lien vers le haut, où href="javascript:;" est utilisé pour empêcher le comportement par défaut de la balise a, car nous voulons déclencher un événement de clic pour faites en sorte que la barre de défilement revienne en haut au lieu de passer à la page. Bien sûr, si vous le définissez sur href="", il passera par défaut en haut de la page, mais l'expérience utilisateur est relativement médiocre. Nous souhaitons principalement obtenir un effet d'assouplissement. OK, définissons le style de la balise a :
1 2 |
|
Ici, la balise a est fixée dans le coin inférieur droit de la page via position:fixed. La position spécifique peut être transmise. Ajustez finement à droite et en bas. Définissez l'image d'arrière-plan pour la balise a, qui est l'image ci-dessus. La valeur par défaut est d'afficher la moitié supérieure de l'image, soit 40 X 40. En raison de la taille de l'image (40 X 80), la position de l'arrière-plan peut être directement réglé en haut à gauche.
Et la balise a est masquée en premier par défaut. Lorsque nous faisons défiler la page, si la hauteur de défilement est plus grande que la zone visible denotre ordinateur, la balise a sera principalement affichée. implémenté avec JS, qui sera discuté ci-dessous !
L'effet flottant de la balise a est en fait très simple. Changez simplement la position de l'image d'arrière-plan. Pour plus de détails, reportez-vous au code CSS ci-dessus !
Maintenant que le style du bouton de retour en haut est disponible, l'étape suivante consiste à utiliser JS pour obtenir l'effet de retour en haut lorsque vous cliquez sur le bouton. Le code est le suivant : <🎜. >
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
|
Pour plus de codes d'effets spéciaux de fonction de retour en haut, veuillez visiter :[Recommandations associées]Retour au code en haut Colonne
5 retour simple vers le haut des codes d'effets spéciaux (collection)
html5 partage de codes d'effets spéciaux sélectionnés (collection)
Recommandé 5 codes de service client QQ flottants en ligne utiles à télécharger gratuitement (haute qualité)
Recommandé 5 codes d'effets spéciaux de code QR flottant pratiques et magnifiques pour pages Web
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!