O botão de volta ao topo da página inicial do Taobao é o seguinte: o botão será exibido após puxar para baixo a uma certa distância. Clique no botão lentamente de volta ao topo
Vamos primeiro analisar quais eventos precisam ser adicionados para alcançar esse efeito. Mova o mouse para dentro e para fora do botão e o desempenho do botão muda, para que você precise adicionar eventos MouseOver e MouseOut ao botão. Para ouvir alterações na barra de rolagem, você precisa adicionar um evento de rolagem à janela, clique no botão para voltar à parte superior e adicionar um evento de clique no botão. Encapsamos o manipulador de eventos em três funções movein, moveout, Gotop;
Aqui está o código HTML/CSS
A cópia do código é a seguinte:
<div>
<div> Chefe </div>
<div> conteúdo principal, a altura é 2000px </div>
<divbtn "> de volta ao topo </div>
</div>
A cópia do código é a seguinte:
.Container {Width: 980px;
.Content {Hight: 2000px;
#btn {
Posição: fixado;
Inferior: 50px;
Direita: 0;
Largura: 54px;
Altura: 55px;
Antecedentes: URL (icons.png) No -repetir 0 -110px;
tamanho de fonte: 12px;
altura da linha: 55px;
Alinhamento de texto: centro;
Indente de texto: -9999em;
Cursor: Ponteiro;
Exibir: Nenhum;
Abaixo está o código JS completo
A cópia do código é a seguinte:
window.addeventListener ("load", function () {
var btn = document.getElementById ("btn");
btn.addeventListener ("mouseOver", movin, false);
btn.addeventListener ("mouseout", moveout, false);
função movein () {
btn.style.color = "#ffffff";
btn.style.textIndent = "0em";
btn.style.backgroundImage = "nenhum";
btn.style.backgroundColor = "#ff4401";
}
função moveout () {
btn.style.textIndent = "-9999em";
btn.style.backgroundImage = "url (icons.png)";
}
função gotop (aceleração, tempo) {// modifica os parâmetros para ajustar a velocidade para retornar ao topo
aceleração = aceleração || 0,1;
tempo = tempo || 10;
VAR Speed = 1 + aceleração;
função getsCrolltop () {// Obtenha a distância vertical da barra de rolagem
Return Document.DocumentElement.Scrolltop ||.
}
Função SetScrolltop (Valor) {// Defina a distância vertical da barra de rolagem.
document.documentElement.scrolltop = value;
document.body.scrolltop = value;
}
window.onscroll = function () {
var scrolltop = getsCrolltop ();
if (scrolltop> 100) {// Ao determinar até que ponto a barra de rolagem está do topo da janela, é 100px
btn.style.display = "bloco";
} outro {
btn.style.display = "nenhum";
}
};
btn.OnClick = function () {
var timer = setInterval (function () {
SetScrolltop (Math.floor (getsCrolltop () /velocidade);
if (getsCrolltop () == 0)
ClearInterval (timer);
}, tempo);
};
}
Gotop (0,2, 8);
}, false);
Obviamente, existem outros métodos de implementação, e a seguir são os códigos -chave para outros métodos
A cópia do código é a seguinte:
btn.OnClick = function () {
ClearInterval (timer);
var timer = setInterval (function () {
var agora = scrolltop;
velocidade = (0 - agora) / 10;
velocidade = math.floor (velocidade);
if (agora == 0);
ClearInterval (timer);
document.documentElement.scrolltop = agora + velocidade;
document.body.scrolltop = agora + velocidade;
}, 15);
}
O código aqui se refere principalmente a outros recursos na Internet e adiciona um pouco de seu próprio entendimento. Obviamente, existem outros métodos de implementação, como Window.ScrollTo () que o JavaScript suporta o mais cedo possível. Se você o implementar com o JQ, o volume de código se tornará muito pequeno
Pessoalmente, acho que será muito mais fácil aprender JavaScript nativo primeiro, como descobrir tipos de dados, fechamentos, herança, escopo, DOM, CSS, processamento de eventos, Ajax, etc. e aprender outras estruturas após proficiência.