Recientemente, necesito crear un botón para volver a la cima al desarrollar un sitio web, pero principalmente lo desarrollaré para el backend y no soy muy hábil en la interfaz. Después de la consulta de información en línea, he creado un botón para volver a la parte superior. Las siguientes son dos formas simples de grabarlo. Los amigos que les gusta este sitio web pueden marcarlo y actualizarán sus materiales de aprendizaje de vez en cuando.
El primer tipo: citando jQuery externoCree una nueva página HTML, copie y guarde el siguiente código, ábralo a través del navegador y puede ver el efecto.
<! DocType html> <html lang = en> <head> <meta charset = utf-8> <title> doc </title> <style> .arw {border: 9px sólido transparente; color-fondo de borde: #3DA0DB; Ancho: 0px; Altura: 0px; arriba: 0px} .stick {ancho: 8px; Altura: 14px; Border-Radius: 1px; Color de fondo: #3DA0DB; Arriba: 15px; } #back_top div {posición: absoluto; margen: auto; Derecha: 0px; Izquierda: 0px; } #Back_Top {Background-Color: #DDDDDDD; Altura: 38px; Ancho: 38px; Border-Radius: 3px; Pantalla: bloque; cursor: puntero; Posición: fijo; derecho: 50px; Abajo: 100px; Pantalla: ninguno; } </style> </head> <body> <div id = artículo> </div> <div id = back_top> <div class = Arrow> </iv> <div class = stick> </div> <script src = http: //cdn.staticfile.org/jquery/1.1.1-rc2/jquery.min.js> </script> <scry (script> i = 0; i <100; i ++) {$ (#artículo) .append (<p> xxxxxxxxxxx <br> </p>)}}) </script> <script> $ (function () {$ (window) .scroll (function () {// siempre que la ventana se desplace, el siguiente código se activará var scrollt = document.Documentement.sCrollements document.body.scrolltop; estará parpadeando}}); }); </script> </body> </html> El segundo tipo: use CSS e iconos especiales para configurarloTodo el código es simple y hermoso. Vuelva al botón superior. Lo mismo que el anterior, copie el código en el archivo HTML y ábralo para ver el efecto.
<! DocType html> <html lang = en> <head> <meta charset = utf-8> <title> doc </title> <style> #back_top {display: block; Ancho: 60px; Altura: 60px; Posición: fijo; Abajo: 50px; Derecha: 40px; Border-Radius: 10px 10px 10px; Decoración de texto: ninguna; Pantalla: ninguno; Color de fondo:#999999; } #back_top span {display: block; Ancho: 60px; Color: #DDDDD; tamaño de fuente: 40px; Text-Align: Center; margen-top: 4px; } #back_top span: hover {color: #ccccccc; } </style> </head> <body> <div id = artículo> </div> <a id = back_top href = script :;> <span> ⌆ </span> </a> </div> <script> $ (function () {for (var i = 0; i <00; i ++) {$ (#artículo) .append (<p> xxxxxxx <br> </p> </p> </p>) }}) </script> <script> $ (function () {$ (ventana) .scroll (function () {// Mientras la ventana se scrolls, el siguiente código se activará var scrollt = document.documentelement.scrolltop + document.body.scrolltop; // obtendrá la altura de desplazamiento si (scrollt> 200) {// la altura de la altura de la altura de la altura de la altura y la altura de la altura y la altura de la altura y la altura de la altura y la altura de la altura y luego la altura de la altura y la altura de la altura y la altura, la altura, la altura y luego la altura, la altura, la altura, la altura, la altura y la altura. $ (#back_top) .fadein (400); arriba en 200 ms. $ (html, cuerpo) .animate ({scrolltop: 0px}, 200);Los dos métodos anteriores solo proporcionan ideas y pueden usarse directamente. Puedes depurar los íconos que quieres solo. Espero que sea útil para el aprendizaje de todos, y espero que todos apoyen más a Wulin.com.