Botón para volver atrás

En ocasiones dependiendo de cómo esté programada la estructura de una página web, es muy útil insertar un enlace o botón para volver hacia atrás, en lugar de redirigirlo a una dirección o path.

Sobre todo si se trata de un web-site que tiene muchos apartados creados, (subcategorías).

Por ello, en este artículo veremos cómo programar dicha rutina, en modo de enlace y en botón gráfico y en botón tipo submit.

En modo de enlace podemos hacer lo siguiente:

<a href="javascript:history.back()"> Volver Atrás</a>

En modo de botón gráfico o imagen:

<a href="javascript:history.back()"><img src="images/boton.jpg" height="33" width="100" alt="Botón"</a>

Y en modo botón tipo submit:

<input type="button" onclick="history.back()" name="volver atrás" value="volver atrás">
Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(36 votos, promedio: 5 de 5)
Comparte en las redes sociales
¿Buscas trabajo de programador?

42 respuestas a “Botón para volver atrás”

  1. Cesar GT dice:

    Tengo un problema con estos metodos en mis pagina PHP, al querer regresar por cualquiera de los metodos, me aparece la ventana de

    Confirmar reenvío del formulario

    Pulsa el botón de actualización de página para que se vuelvan a enviar los datos necesarios para cargar la página.
    ERR_CACHE_MISS

    Esto a que se debe; si hago click en el navegador para actualziar, ya se ve la pagina bien.

    • Jose Aguilar dice:

      Hola,

      Esto parece que te está ocurriendo porque tiene el botón de vuelta atrás justo después del envío de un formulario. En este caso, no recomiendo usar este botón de vuelta atrás. En su defecto, usa un enlace normal que enlace a la página que desees.

      Saludos

  2. eliza dice:

    Hola utilizo la etiqueta pero no me lelva ninguna pagina, la verdad no se nada de esto y no se si la estoy utilizando bien.
    la puse asi: Volver Atrás
    pero no se si la estoy usando bien, no se di va ahi la url ayudaaaaaaaaaaaa es para un trabajo de la escuela.

  3. Abraham aceves dice:

    como agrego el boton y que sea flotante

    • Jose Aguilar dice:

      Hola,

      Al botón puedes agregarle una clase y desde tu hoja de estilos css aplicarle un position:fixed;

      Después con top, left o right lo posicionas donde quieras en la pantalla.

      Saludos

  4. manuel dice:

    Jose quería consultarte como podía llegar a hacer que el botón al momento de hacer click me lleve al mismo lugar donde estaba antes. Te explico mi situación, estoy realizando na pagina con un listado de películas. Al momento de hacer click en la foto de la película se abre n pop up con los datos y la cruz para cerrarlo. Al apretar la cruz para cerrarlo, me lleva al inicio de la pagina y yo necesito que me devuelva al lugar donde clickee en la película. No se si me explico, espero tu respuesta!

    • Jose Aguilar dice:

      Hola Manuel,

      Si que te explicas y he entendido bien. Este artículo no podrá ayudarte pero si será importante saber que tipo de plugin para popup utilizas. Quizá ese plugin pueda tener una opción para esto.

      Saludos

  5. Etanislao De la Cruz dice:

    Hola tengo una página con una parte del código encriptado por el generador y deseo insertar un botón de regreso y me aparece al lado y se veo feo.

    Me pueden ayudar.

  6. Génesis Escalante dice:

    Hola José muchas gracias por la info, como puedo hacer para que el botón me lleve atrás y se vuelva a ejecutar la consulta.
    Te explico un poco, tengo una pantalla con un combobox, de acuerdo a la opción escogida me muestra otra pantalla con un listado de registros («pendientes de aprobación o eliminación»), y con los botones respectivos de APROBAR y ELIMINAR. Cuando selecciono un registro doy clic en el botón de Aprobar o Eliminar me muestra una pantalla que dice si se ha aprobado o eliminado existosamente y un href de «Regresar», pero al regresar al panel anterior me aparece la pantalla sin el listado de registros ni botones, vacía. Le he puesto el código que indicaste y ahora ya me muestra los registros pero también me sale el que elimine o aprobé anteriormente, comprendo que porque nos muestra el «atrás» literalmente.

    Me sugeririas algo?

  7. Alvaro de Lavalle dice:

    Muchísimas gracias,
    En mi caso dentro de wordpress usé el primer código sugerido, luego personalicé la columna, el campo y el texto.
    funciona perfecto
    Saludos

  8. Frank V dice:

    Hola. Excelente la información, me encantaría que me ayudes a lo siguiente: Especificar dónde debo específicamente agregar este código. Pude probar su funcionamiento con un plugin para incorporar código , pero lo agrega a todas las páginas y no me interesa tenerlo en mi página de inicio ya que no tiene lógica un botón así en dicha página

  9. Martina dice:

    Hola José yo tengo una duda, tengo una página web en la que se muestra un proceso paso a paso de como cultivar kombucha. El problema que tengo es que necesito que al hacer click en una imagen, que funciona como botón, me vuelva al paso anterior y no estoy pidiendo resolver esa parte. Tengo un solo HTML que corresponde a todo el proceso que se muestra.

  10. Carlos dice:

    Buenas…solo un pequeño problema. Cuando uso validacion de HTML5 y tengo un campo requerido al intentar volver a trás me solicita que rellene ese campo.

  11. Rosa dice:

    Muy bien explicado, me ha funcionado, gracias!

  12. dany dice:

    Millones y millones de gracias, super cencillo y efectivo.

  13. excelente post, muy util

  14. pedro dice:

    Alguien me puede apollar estoy realizando una pagina con wix pero veo que no me da la opcion de un voton que sierre la imajen o vuelva atras al sitio en el que estaba. help

  15. juan dice:

    Gracias, muy bueno y simple, pero difícil, eres un creador.

  16. adrian dice:

    Hola jose. En mi caso tenemos una web con un extenso listado de productos. Se puede crear un boton atras que te deje en la misma parte del listado donde estabamos. Nosotros tenemos un boton ir atras pero nos lleva al inicio del listado. El boton paso atras de andriod lo hace, pero en codigo no se como se podria hacer. Gracias

  17. Marco dice:

    Hola José, como puedo hacer para ubicar el mismo código de una vez en todas las páginas de mi sitio?

    Te agradezco mucho tu pronta respuesta

    Un abrazo
    Marco

  18. IGNACIO dice:

    Gracias, está perfecto y funciona muy bien gracias por compartir.

  19. Andres Perez dice:

    Lo que pasa es que necesitamos un botón de volver pero es para un proyecto estático porque estos son dinámicos es para un sistema administrador y empleado

  20. Natividad dice:

    ¿Se puede poner el botón «Volver Atrás» flotante?

    Muchísimas gracias.

  21. E. García dice:

    Excelente información, me ha servido de mucho.
    Gracias.

  22. diegobq dice:

    como hago para que vuelva a una pagina especifica

  23. Diego dice:

    Gracias

  24. paulette ziede dice:

    Hola,

    No se donde copiar el link para configurar el botón atrás.
    Gracias.

  25. Evelyn dice:

    Muchas gracias, tus articulos son geniales y de grana ayuda

  26. Patricia dice:

    Hola Jose,
    He estado viendo cómo inserta el botón de volver atrás y ha sido de gran ayuda, pero quería saber si me puedes decir cómo situarlo en el lado derecho de la página, ya que cada vez que lo intento me cambia la configuración y no lo consigo.
    Muchas gracias

  27. Ricardo dice:

    De gran ayuda

  28. Diana dice:

    Mil gracias, era justo lo que estaba buscando

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre