Native js réalise l'effet de revenir lentement au sommet lorsque vous cliquez sur le bouton sur les compétences Taobao homepage

Native js réalise l'effet de revenir lentement au sommet lorsque vous cliquez sur le bouton sur les compétences Taobao homepage_javascript

WBOY

Libérer： 2016-05-16 16:53:10

original

1761 Les gens l'ont consulté

Le bouton de retour en haut de la page d'accueil de Taobao ressemble à ceci : le bouton n'est affiché que lorsqu'il est tiré vers le bas jusqu'à une certaine distance. Lorsque la souris est placée sur le bouton, l'arrière-plan du bouton devient gris et l'icône se transforme en texte. Cliquez sur le bouton pour revenir lentement en haut

Analysons d'abord quels événements doivent être ajoutés pour obtenir un tel effet. Lorsque la souris entre et sort du bouton, le comportement du bouton change, vous devez donc ajouter des événements mouseover et mouseout au bouton. Pour écouter les modifications dans la barre de défilement, vous devez ajouter un événement de défilement à la fenêtre, cliquer sur le bouton pour revenir en haut et ajouter un événement de clic au bouton. Nous encapsulons le gestionnaire d'événements dans trois fonctions moveIn, moveOut, goTop

Le code html/css est donné ci-dessous

Copier le code Le code est le suivant :

Contenu principal, hauteur 2000px

Copier le code Le code est tel suit :

.container { width: 980px; margin: 0 auto; height: auto; background: #aaa;} 
.content { height: 2000px; 
#btn { 
position:fixe; 
bas: 50px; 
droite: 0; 
largeur: 54px; 
arrière-plan: url(icônes. png ) no-repeat 0 -110px; } //Vous pouvez trouver une image d'arrière-plan à volonté 
font-size: 12px 
line-height: 
text-align: center; text- indent: -9999em; 
cursor: pointer; 
display: none 

 
Ce qui suit est le code js complet

Copier le code Le code est le suivant : window.addEventListener("load",function() {

var btn = document.getElementById( "btn");

btn.addEventListener("mouseover", moveIn, false); 
btn.addEventListener("mouseout", moveOut, false); >btn.style.color = "#ffffff"; //Le style en ligne modifié a la priorité la plus élevée 
btn.style.textIndent = "0em" 
btn.style.backgroundImage = "none"; 🎜> btn.style.backgroundColor = "#FF4401"; 
} 
function moveOut() { 
btn.style.textIndent = "-9999em" 
btn.style.backgroundImage = "url (icons .png)"; 
} 

function goTop(accélération, temps) { //Modifier les paramètres pour ajuster la vitesse de retour au sommet 
accélération = accélération || 0.1; 
time = time | 10; 
var speed = 1 accélération; 
function getScrollTop() { //Obtenir la distance verticale de la barre de défilement
return document.documentElement.scrollTop || scrollTop; 
} 
function setScrollTop(value) { //Définir la distance verticale de la barre de défilement La clé pour obtenir l'effet est de modifier en continu la distance verticale de la barre de défilement dans un court intervalle pour obtenir l'effet. effet de défilement 
document. documentElement.scrollTop = value; 
document.body.scrollTop = value; 
window.onscroll = function() { 
var scrollTop = getScrollTop(); 🎜>if (scrollTop > 100) { //Affiche pour juger de la distance entre la barre de défilement et le haut de la fenêtre, ici elle est de 100px 
btn.style.display = "block" 
} else; { 
btn.style.display = "aucun"; 
} 
} 
btn.onclick = function () { 
var timer = setInterval(function() { 
setScrollTop (Math.floor(getScrollTop() / speed)) ; //Cette ligne de code est la clé. Obtenez la distance verticale de la barre de défilement, divisez-la par la vitesse, puis définissez la distance verticale de la barre de défilement if (getScrollTop() == 0) 
clearInterval(timer); 
}, 
} 
goTop(0.2, 8>); false); 

 
Bien sûr, il existe d'autres méthodes d'implémentation, les codes clés des autres méthodes sont donnés ci-dessous 




 Copier le code 
 

 Le code est le suivant : 

 

btn.onclick = function() {
clearInterval(timer);
var timer = setInterval(function() {

var now = scrollTop; //Distance verticale de la barre de défilementspeed = (0 - now) / 10; speed = Math.floor(speed); 🎜>clearInterval(timer); document.documentElement.scrollTop = now speed; //Navigateur en mode standard sous document.body.scrollTop = now speed; //Navigateur en mode bizarre}, 15) ; }

Native js réalise l'effet de revenir lentement au sommet lorsque vous cliquez sur le bouton sur les compétences Taobao homepage_javascript

Le code ici fait principalement référence à d'autres ressources sur Internet et ajoute un peu de ma propre compréhension. Bien sûr, il existe d'autres méthodes d'implémentation, telles que window.scrollTo(), que JavaScript a prises en charge pour la première fois. Si vous utilisez jQ pour l'implémenter, la quantité de code deviendra très faible. Vous pouvez vous référer à w3cplus

Personnellement, je pense que vous devriez d'abord bien apprendre le JavaScript natif, comme comprendre les types de données, les fermetures, l'héritage, portée, DOM, CSS et événements, traitement, Ajax, etc. Il sera beaucoup plus facile d'apprendre d'autres frameworks une fois que vous vous y serez familiarisé.