Muitas páginas da web colocarão um botão "Voltar para o topo" abaixo, especialmente páginas da web que não possuem navegação na parte inferior da página, o que pode ajudar os visitantes a encontrar a navegação novamente ou revisitar o anúncio (é tão bonito). Como o JavaScript está se tornando cada vez mais amplamente utilizado nos últimos anos, o efeito deslizante está em toda parte, então eu segui a tendência e fiz o retorno à função superior para criar um efeito deslizante. Posteriormente, a fim de se ajustar melhor às características físicas, o efeito deslizante da desaceleração foi transformado.
Vamos falar sobre o princípio primeiro. Vamos pegar a distância da barra de rolagem até o topo da página e, em seguida, moveremos -a por uma certa distância; Em seguida, pegue a distância da barra de rolagem até o topo da página e mova -a por uma certa distância (um pouco menor que a última vez); e assim por diante ...
<script type = "text/javascript">/*** de volta ao topo da página* @param aceleração de aceleração* @param intervalo de tempo (ms) **/função Gotop (aceleração, tempo) {aceleração = aceleração || 0,1; tempo = tempo || 16; var x1 = 0; var y1 = 0; var x2 = 0; var y2 = 0; var x3 = 0; var y3 = 0; if (document.documentElement) {x1 = document.documentElement.Scrollleft || 0; y1 = document.documentElement.scrolltop || 0; } if (document.body) {x2 = document.body.scrollleft || 0; y2 = document.body.scrolltop || 0; } var x3 = window.scrollx || 0; var y3 = window.scrolly || 0; // distância horizontal da barra de rolagem até a parte superior da página var x = math.max (x1, math.max (x2, x3)); // distância vertical da barra de rolagem até a parte superior da página var y = math.max (y1, math.max (y2, y3)); // Distância de rolagem = Volta de corrente/velocidade, porque a distância é menor e a velocidade é maior que 1, a distância de rolagem se tornará uma velocidade Var menor e menor = 1 + aceleração; window.scrollto (math.floor (x / speed), math.floor (y / speed)); // Se a distância não for zero, continue chamando a função de iteração se (x> 0 || y> 0) {var InvokeFunction = "Gotop (" + aceleração + "," + time + ")"; window.setTimeout (InvokeFunction, Time); }} </script>document.documentElement.scrolltop, document.body.scrolltop, window.scrolly são realmente iguais, mas eles só funcionam em alguns navegadores. Quanto a quais navegadores funcionam, você pode depurar você mesmo.
Como usá -lo?
A cópia do código é a seguinte:
<a href = "#" onclick = "Gotop (); return false;"> top </a>