Le bouton supérieur sur la page d'accueil de Taobao est le suivant: Le bouton sera affiché après avoir tiré sur une certaine distance. Cliquez lentement sur le bouton en haut
Analyons d'abord les événements à ajouter pour réaliser un tel effet. Déplacez la souris dans et hors du bouton, et les performances du bouton change, vous devez donc ajouter des événements de souris et de souris sur le bouton. Pour écouter les modifications de la barre de défilement, vous devez ajouter un événement de défilement à la fenêtre, cliquez sur le bouton pour revenir en haut et ajouter un événement de clic au bouton. Nous encapsulons le gestionnaire d'événements en trois fonctions Movein, Moveout, Gotop;
Voici le code HTML / CSS
La copie de code est la suivante:
<div>
<div> tête </div>
<div> Le contenu principal, la hauteur est de 2000px </div>
<divbtn "> en haut </div>
</div>
La copie de code est la suivante:
.Contaileur {largeur: 980px;
.Content {hauteur: 2000px;
#btn {
Position: fixe;
En bas: 50px;
à droite: 0;
Largeur: 54px;
hauteur: 55px;
Contexte: URL (icons.png) sans répétition 0 -110px;
taille de police: 12px;
hauteur de ligne: 55px;
Texte-aligne: Centre;
Texte-indent: -9999em;
curseur: pointeur;
Affichage: aucun;
Vous trouverez ci-dessous le code JS complet
La copie de code est la suivante:
window.addeventListener ("charger", function () {
var btn = document.getElementById ("btn");
BTN.AddeventListener ("Mouseover", Movin, False);
BTN.AddeventListener ("Mouseout", Moveout, False);
fonction movein () {
btn.style.color = "#ffff"; // Le style en ligne est modifié, avec la priorité la plus élevée;
btn.style.textindent = "0em";
btn.style.backgroundMage = "Aucun";
btn.style.backgroundcolor = "# ff4401";
}
fonction moveout () {
btn.style.textindent = "-9999em";
btn.style.backgroundMage = "URL (icons.png)";
}
fonction gotop (accélération, temps) {// modifie les paramètres pour ajuster la vitesse pour revenir en haut
Accélération = accélération || 0,1;
Time = temps || 10;
Var Speed = 1 + Accélération;
fonction getcrolltop () {// Obtenez la distance verticale de la barre de défilement
return Document.DocumentElement.ScrollTop ||
}
Fonction SetScrollTop (valeur) {// Définissez la distance verticale de la barre de défilement.
document.DocumentElement.ScrollTop = valeur;
document.body.scrolltop = valeur;
}
window.onscroll = function () {
var scrolltop = getCrollTop ();
if (scrolltop> 100) {// Lorsque vous déterminant la distance de la barre de défilement du haut de la fenêtre, il est de 100px
btn.style.display = "bloc";
} autre {
btn.style.display = "aucun";
}
};
btn.onclick = function () {
var timer = setInterval (function () {
setscrolltop (mathématiques (getCrollTop ());
if (getcrolltop () == 0)
ClearInterval (temporisateur);
}, temps);
};
}
Gotop (0,2, 8);
}, FAUX);
Bien sûr, il existe d'autres méthodes de mise en œuvre, et ce qui suit est les codes clés pour d'autres méthodes
La copie de code est la suivante:
btn.onclick = function () {
ClearInterval (temporisateur);
var timer = setInterval (function () {
var maintenant = scrolltop; // la distance verticale de la barre de défilement
vitesse = (0 - maintenant) / 10;
Speed = math.floor (vitesse);
if (maintenant == 0);
ClearInterval (temporisateur);
document.DocumentElement.ScrollTop = maintenant + Speed;
document.body.scrolltop = maintenant + vitesse;
}, 15);
}
Le code ici fait principalement référence à d'autres ressources sur Internet et ajoute un peu de votre propre compréhension. Bien sûr, il existe d'autres méthodes de mise en œuvre, telles que Window.Scrollto () que JavaScript prend en charge le plus tôt possible. Si vous l'implémentez avec JQ, le volume de code deviendra très petit.
Personnellement, je pense qu'il sera beaucoup plus facile d'apprendre le JavaScript natif d'abord, comme déterminer les types de données, les fermetures, l'héritage, la portée, le DOM, le CSS, le traitement d'événements, l'Ajax, etc., et l'apprentissage d'autres cadres après la compétence.