Ayuda para desarrollar subir al top funcional con javascript

  • Autor Autor ultracobra
  • Fecha de inicio Fecha de inicio

ultracobra

Ni
Verificado por Whatsapp
He tratado de implementar un SUBIR AL TOP en mi sitio web y no me ha resultado bien luego de tres intentos con JavaScript. Dejo un ejemplo que no funcionó y es muy largo, preferiría algo más conciso.

Alguien puede darme un script / trozo simple funcional? Si es con otro lenguaje me parece bien, gracias!


 
Este es un ejemplo muy sencillo de cómo implementar un botón de "subir al top" en JavaScript:

HTML:
```html
<a href="#" id="btn-back-to-top">Subir al top</a>
```

CSS:
```css
#btn-back-to-top{
display: none;
position: fixed;
bottom: 20px;
right: 30px;
font-size: 18px;
background: #555;
color: #fff;
padding: 10px;
border-radius: 3px;
}

#btn-back-to-top:hover{
background: #333;
color: #fff;
text-decoration: none;
}
```

JS:
```javascript
const btnBackToTop = document.querySelector('#btn-back-to-top');

btnBackToTop.addEventListener('click', function(e) {
e.preventDefault();
window.scroll({
top: 0,
left: 0,
behavior: 'smooth'
});
});

window.addEventListener('scroll', function() {
if (window.scrollY > 200) {
btnBackToTop.style.display = 'block';
} else {
btnBackToTop.style.display = 'none';
}
});
```

Este botón de "subir al top" se mostrará después de que se haya desplazado hacia abajo 200 píxeles en la página. Cuando se hace clic en el botón, la página se desplazará suavemente hacia arriba hasta la parte superior de la página.
 
¿Por qué el Scroll Top no lo pones dentro de una función onclick?

 
Editado!
 
Con html y css lo puedes hacer muy sencillo.

Le colocas un id al elemento body de tu página, luego puedes crear un elemento <a> que se dirija a tu elemento local con el id definido.

HTML: 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #btn {
            position: fixed;
            bottom: 20px;
            right: 20px;
            font-size: 16px;
            padding: 10px;
            background-color: #555;
            color: #fff;
            border-radius: 50%;
        }

        #btn:hover {
            background-color: #333;
        }
    </style>
</head>
<body id="#top">
    <h2>¿Qué es Lorem Ipsum?</h2>
    Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.

    <h2>¿Por qué lo usamos?</h2>
    Es un hecho establecido hace demasiado tiempo que un lector se distraerá con el contenido del texto de un sitio mientras que mira su diseño. El punto de usar Lorem Ipsum es que tiene una distribución más o menos normal de las letras, al contrario de usar textos como por ejemplo "Contenido aquí, contenido aquí". Estos textos hacen parecerlo un español que se puede leer. Muchos paquetes de autoedición y editores de páginas web usan el Lorem Ipsum como su texto por defecto, y al hacer una búsqueda de "Lorem Ipsum" va a dar por resultado muchos sitios web que usan este texto si se encuentran en estado de desarrollo. Muchas versiones han evolucionado a través de los años, algunas veces por accidente, otras veces a propósito (por ejemplo insertándole humor y cosas por el estilo).

    <h2>¿Qué es Lorem Ipsum?</h2>
    Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.

    <h2>¿Por qué lo usamos?</h2>
    Es un hecho establecido hace demasiado tiempo que un lector se distraerá con el contenido del texto de un sitio mientras que mira su diseño. El punto de usar Lorem Ipsum es que tiene una distribución más o menos normal de las letras, al contrario de usar textos como por ejemplo "Contenido aquí, contenido aquí". Estos textos hacen parecerlo un español que se puede leer. Muchos paquetes de autoedición y editores de páginas web usan el Lorem Ipsum como su texto por defecto, y al hacer una búsqueda de "Lorem Ipsum" va a dar por resultado muchos sitios web que usan este texto si se encuentran en estado de desarrollo. Muchas versiones han evolucionado a través de los años, algunas veces por accidente, otras veces a propósito (por ejemplo insertándole humor y cosas por el estilo).
    <h2>¿Qué es Lorem Ipsum?</h2>
    Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.

    <h2>¿Por qué lo usamos?</h2>
    Es un hecho establecido hace demasiado tiempo que un lector se distraerá con el contenido del texto de un sitio mientras que mira su diseño. El punto de usar Lorem Ipsum es que tiene una distribución más o menos normal de las letras, al contrario de usar textos como por ejemplo "Contenido aquí, contenido aquí". Estos textos hacen parecerlo un español que se puede leer. Muchos paquetes de autoedición y editores de páginas web usan el Lorem Ipsum como su texto por defecto, y al hacer una búsqueda de "Lorem Ipsum" va a dar por resultado muchos sitios web que usan este texto si se encuentran en estado de desarrollo. Muchas versiones han evolucionado a través de los años, algunas veces por accidente, otras veces a propósito (por ejemplo insertándole humor y cosas por el estilo).

    <h2>¿Qué es Lorem Ipsum?</h2>
    Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.

    <h2>¿Por qué lo usamos?</h2>
    Es un hecho establecido hace demasiado tiempo que un lector se distraerá con el contenido del texto de un sitio mientras que mira su diseño. El punto de usar Lorem Ipsum es que tiene una distribución más o menos normal de las letras, al contrario de usar textos como por ejemplo "Contenido aquí, contenido aquí". Estos textos hacen parecerlo un español que se puede leer. Muchos paquetes de autoedición y editores de páginas web usan el Lorem Ipsum como su texto por defecto, y al hacer una búsqueda de "Lorem Ipsum" va a dar por resultado muchos sitios web que usan este texto si se encuentran en estado de desarrollo. Muchas versiones han evolucionado a través de los años, algunas veces por accidente, otras veces a propósito (por ejemplo insertándole humor y cosas por el estilo).


    <h2>¿Qué es Lorem Ipsum?</h2>
    Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.

    <h2>¿Por qué lo usamos?</h2>
    Es un hecho establecido hace demasiado tiempo que un lector se distraerá con el contenido del texto de un sitio mientras que mira su diseño. El punto de usar Lorem Ipsum es que tiene una distribución más o menos normal de las letras, al contrario de usar textos como por ejemplo "Contenido aquí, contenido aquí". Estos textos hacen parecerlo un español que se puede leer. Muchos paquetes de autoedición y editores de páginas web usan el Lorem Ipsum como su texto por defecto, y al hacer una búsqueda de "Lorem Ipsum" va a dar por resultado muchos sitios web que usan este texto si se encuentran en estado de desarrollo. Muchas versiones han evolucionado a través de los años, algunas veces por accidente, otras veces a propósito (por ejemplo insertándole humor y cosas por el estilo).


    <h2>¿Qué es Lorem Ipsum?</h2>
    Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.

    <h2>¿Por qué lo usamos?</h2>
    Es un hecho establecido hace demasiado tiempo que un lector se distraerá con el contenido del texto de un sitio mientras que mira su diseño. El punto de usar Lorem Ipsum es que tiene una distribución más o menos normal de las letras, al contrario de usar textos como por ejemplo "Contenido aquí, contenido aquí". Estos textos hacen parecerlo un español que se puede leer. Muchos paquetes de autoedición y editores de páginas web usan el Lorem Ipsum como su texto por defecto, y al hacer una búsqueda de "Lorem Ipsum" va a dar por resultado muchos sitios web que usan este texto si se encuentran en estado de desarrollo. Muchas versiones han evolucionado a través de los años, algunas veces por accidente, otras veces a propósito (por ejemplo insertándole humor y cosas por el estilo).
    <br>
    <br>

    <a href="#top" id="btn">Volver al inicio</a>

</body>
</html>
 
Reacciones: kj2
La respuesta correcta me la ha dado el robotito y es curioso que no me dio buen resultado cuando se lo pregunté directamente a ChatGPT...
 
Aunque ahora me di cuenta que la razón por la que no me funcionaba antes es porque hay un conflicto de clases no porque fuera muy difícl. O sea que puse el código del robotito aislado y funciona ok pero en mi sitio web actual no, por lo que debo revisar de una a una las clases y destrabar ese conflicto.
 
Hola, intentaré ayudar, espero que esta vez pueda hacerlo. El caso es que yo mismo encontré recientemente un problema como la inestabilidad del software en Java. Lo me encontré en el trabajo. Así que mi jefe literalmente metió on la nariz y me dijo que no hiciera tonterías y que no tratara de hacer todo yo solo. Que el ciclo de desarrollo siempre incluye varias etapas y varios equipos. Y luego, un equipo separado también debe evaluar las impresiones sobre los clientes del software. Eso es todo, sí.
 
moiseseccam dijo:
¿Por qué el Scroll Top no lo pones dentro de una función onclick?

Hacer clic para expandir...
me sorprende que funcione esta versión tan simple cuando las otras me dieron lío. Aunque pudo ser oir conflictos de clases, ya que barrí muchas de la hoja de estilos que estaban desfasadas.

Le mejoraré los estilos pero de resto todo bonito...

Gracias Moises!🍻
 
Hay que estar conectado o registrado para responder aquí.
Menú
Acceder
Registro