5

Tengo una serie de inputs tipo radio y quiero que al pinchar en ellos me mande hacia arriba de la pantalla con una función jQuery. ¿Cómo podría solucionarlo?

Tengo esta función y no me hace nada.

$("input[name='piezas']").click(function () {
    $(html).scrollTop(0);
});

2 respuestas 2

7

Te mando un ejemplo y además te lo explico.

Primero insertamos el enlace del botón.

<a href="#" class="scrollup">Scroll</a>

◾Ahora le añadimos el estilo al botón.

.scrollup{
    width:40px;
    height:40px;
    opacity:0.3;
    position:fixed;
    bottom:50px;
    right:100px;
    display:none;
    text-indent:-9999px;
    background: url('icon_top.png') no-repeat;
}

Hemos definido la posición del botón como fija con 100px a la derecha y 50px del pie de la página. Hemos usado la propiedad “text-ident” para esconder el texto y mostrar el icono del botón. La propiedad “display:none;” hace que el botón sea invisible al principio.

El icono para el botón ‘icon_top.png‘ es el siguiente:

icon_top

◾Ahora queremos que el botón sea visible si navegamos hacia abajo. Esto lo podemos hacer con el evento scroll de jQuery.

$(window).scroll(function(){
   if ($(this).scrollTop() > 100) {
        $('.scrollup').fadeIn();
   } else {
        $('.scrollup').fadeOut();
   }
});

La propiedad scrollTop obtiene la posición vertical actual de la barra de desplazamiento (barra de scroll). Si es superior a 100px, muestra el botón para ir arriba, si es inferior a 100px lo oculta.

◾El siguiente paso es hacer la animación para ir arriba de la página web al pulsar el botón.

$('.scrollup').click(function(){
    $("html, body").animate({ scrollTop: 0 }, 600);
    return false;
});

La propiedad scrollTop:0 nos desplaza hacia el comienzo de la página web, en la posición 0px, y 600 representa la duración de la animación en milisegundos. Un valor más alto significa una animación más lenta. También puedes usar las propiedades predefinidas como ‘fast‘, ‘slow‘ o ‘normal‘ en vez de usar los milisegundos.

◾Este es el código jQuery completo:

<script type="text/javascript">
    $(document).ready(function(){

        $(window).scroll(function(){
            if ($(this).scrollTop() > 100) {
                $('.scrollup').fadeIn();
            } else {
                $('.scrollup').fadeOut();
            }
        });

        $('.scrollup').click(function(){
            $("html, body").animate({ scrollTop: 0 }, 600);
            return false;
        });

    });
</script>
4
  • gracias.....amigo, si hay otras formas me dices porfa seria bueno aprender distintas formas
    – Gamez
    Commented el 25 abr. 2017 a las 20:48
  • una pregunta que pasa si el scroll no es del window y es del modals; en este caso como se haria ???
    – Gamez
    Commented el 25 abr. 2017 a las 21:07
  • hola amigos tienen una idea ?
    – Gamez
    Commented el 25 abr. 2017 a las 21:30
  • porfa respondan :-<
    – Gamez
    Commented el 25 abr. 2017 a las 22:05
3

Entiendo que la respuesta anterior es mucho más detallada, pero ciñéndome a tu problema, si lo único que quieres es hacer scroll hacia arriba, prueba poner:

window.scrollTo(0, 0);

El primer 0 es la posición X y el segundo la posición Y. Además es una función nativa de Javascript, no necesitas jQuery

Un saludo!

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.