1

Necesito que cuando se selecione un radio button baje automaticamente la pantalla. Tengo este codigo HTML:

<label><input type="radio"  name="radio" value="1"  id="boton1"  class="ancla" data-ancla="scroll"  /></label>
<label><input type="radio" name="radio" value="2" id="boton2"  class="ancla" data-ancla="scroll" /></label>

y este codigo JavaScript:

$('.ancla').on('click', function(e){
e.preventDefault();
var strAncla = '#' + $(this).data('ancla');
$('html,body').animate({scrollTop: $(strAncla).offset().top}, 1500);
});

Pero al darle click realiza lo que deseo pero no seleciona ningun radio button que utilizare despues para guardar en base de datos.

¿Como lo soluciono? Gracias !

3
  • Solo tienes que setear la propiedad del otro radio button a checked después de haber bajado.
    – A. Cedano
    el 17 nov. 2017 a las 22:11
  • Y como hago eso?. Todavia tengo mucho que aprender y poco tiempo en la programacion. Muchas gracias. el 17 nov. 2017 a las 22:12
  • sí, es cierto lo que dice @Diego Lopez. En la linea que hace el animate debe crear el callback $('html,body').animate({scrollTop: $(strAncla).offset().top}, 1500,function(){// Aqui debe setear la variable del radio button o el toggle});. el 17 nov. 2017 a las 22:14

2 respuestas 2

1

Eso sucede por que al hacer el e.preventDefault(); estás anulando el comportamiento por defecto del radio button, entonces debes forzar que el atributo checked del elemento quede seleccionado usando la función prop() de jQuery, de la siguiente manera:

$('.ancla').on('click', function(e){
        e.preventDefault();
    
        var elemento = $(this);
    
        var strAncla = '#' + $(this).data('ancla');
        $('html, body').animate({
            scrollTop: $(strAncla).offset().top
        }, 1500, function(){ 
            $(elemento).prop("checked", true); 
        });
    });
#scroll{
  height: 200vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<label><input type="radio"  name="radio" value="1"  id="boton1"  class="ancla" data-ancla="scroll"  /></label>
<label><input type="radio" name="radio" value="2" id="boton2"  class="ancla" data-ancla="scroll" /></label>

<div id="scroll"></div>

3
  • Muchas gracias parcero! el 17 nov. 2017 a las 22:25
  • Parcero ? sos de Colombia ? jajaja todo bien :D el 17 nov. 2017 a las 22:25
  • 1
    Si, soy de colombia!. Saludos el 17 nov. 2017 a las 22:33
1

Prueba esto.

Debe haber una separación entre ambos para apreciar el desplazamiento.

Para probar el snippet activa la opción de Página completa que aparece a la derecha.

$("#boton1").click(function() {

  $('html, body').animate({
    scrollTop: $("#boton2").offset().top
  }, 1500);
  $("#boton2").prop("checked", true);

});
.espacio {
  margin-top: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="radio"  name="radio" value="1"  id="boton1"  class="ancla" data-ancla="scroll"  /></label>
<div class="espacio"></div>
<label><input type="radio" name="radio" value="2" id="boton2"  class="ancla" data-ancla="scroll" /></label>

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.