Recentemente, preciso criar um botão para retornar ao topo ao desenvolver um site, mas o desenvolvo principalmente para o back -end e não sou muito habilidoso no front -end. Após a consulta de informações on -line, criei um botão para retornar ao topo. A seguir, são apresentadas duas maneiras simples de gravá -lo. Amigos que gostam deste site podem marcar -o e atualizarão seus materiais de aprendizagem de tempos em tempos.
O primeiro tipo: citando jQuery externoCrie uma nova página HTML, copie e salve o código a seguir, abra -o através do navegador e você pode ver o efeito.
<! doctype html> <html lang = en> <head> <meta charset = utf-8> <title> doc </title> <yoy> .arrow {border: 9px sólido transparente; cor-cor de fronteira: #3DA0DB; Largura: 0px; Altura: 0px; topo: 0px} .stick {width: 8px; Altura: 14px; Radio de fronteira: 1px; Background-Color: #3DA0DB; topo: 15px; } #back_top div {Position: Absolute; margem: automático; Direita: 0px; Esquerda: 0px; } #back_top {background-color: #dddddd; Altura: 38px; Largura: 38px; Radio de fronteira: 3px; exibição: bloco; Cursor: Ponteiro; Posição: fixado; Direita: 50px; Inferior: 100px; Exibir: Nenhum; }</style></head><body><div id=article></div><div id=back_top><div class=arrow></div><div class=stick></div><script src=http://cdn.staticfile.org/jquery/1.11.1-rc2/jquery.min.js></script><script>$(function(){ para (var i = 0; i <100; i ++) {$ (#artigo) .append (<p> xxxxxxxxxx <br> </p>)}}) </cript> <cript> $ (funclols () {$ (window) .Scroll (function) {// desde a janela, Document.documentElement.scrolltop + document.body.scrolltop; Fade out. }); </script> </body> </html> O segundo tipo: use CSS e ícones especiais para defini -loTodo o código é simples e bonito. Retorne ao botão superior. O mesmo que acima, copie o código no arquivo HTML e abra -o para ver o efeito.
<! doctype html> <html lang = en> <head> <meta charset = utf-8> <title> doc </title> <yoy> #back_top {display: block; Largura: 60px; Altura: 60px; Posição: fixado; Inferior: 50px; Direita: 40px; Radio de fronteira: 10px 10px 10px; Decoração de texto: Nenhum; Exibir: Nenhum; Background-Color:#999999; } #back_top span {display: block; Largura: 60px; Cor: #ddddd; Size da fonte: 40px; Alinhamento de texto: centro; Margin-top: 4px; } #back_top span: hover {color: #cccccc; } </style> </ad Head> <body> <div id = article> </div> <a id = back_top href = script:;> <pan> ⌆ </span> </a> </div> <cript> $ (function) {para (var i = 0; i <100; i ++) {$ (#artigo). }}) </script> <cript> $ (function () {$ (window) .scroll (function () {// desde que a janela rola, o código a seguir será acionado então, 400); Role até o topo em 200msOs dois métodos acima fornecem apenas idéias e podem ser usados diretamente. Você pode depurar os ícones que deseja sozinho. Espero que seja útil para o aprendizado de todos, e espero que todos apoiem mais o wulin.com.