1

Hola me gustaría poder hacer que el id="botonstop" parase la función desencadenada por el id="boton" que en este caso es un scroll automático. También me gustaría que pudiese ser compatible con que el scroll automático se activase nada más cargar la página.

$(document).ready(function() {
  $("#boton").click(function(event){ 
    $("html, body").animate({ scrollTop: '15000px' }, 10000);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="boton" href="#bottom" style="position:fixed;">start scrolling</a>
<a id="botonstop" href="#bottom" style="position:fixed; margin-top:30px;">stop scrolling</a>

<div id="relleno" style="height:15000px; width:500px; background:green;">

<h2 id="bottom">bottom of page</h2>

1 respuesta 1

2

Usa stop. Mira los cambios que realice, quite el href del a que invoca el stop

$(document).ready(function() {
  $("#boton").click(function(event){ 
    $("html, body").animate({ scrollTop: '15000px' }, 10000);
  });
  $("#botonstop").click(function(event){ 
    $("html, body").stop();
  });
});
#botonstop {cursor:pointer; text-decoration: underline;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="boton" href="#bottom" style="position:fixed;">start scrolling</a>
<a id="botonstop"  style="position:fixed; margin-top:30px;">stop scrolling</a>

<div id="relleno" style="height:15000px; width:500px; background:green;">

<h2 id="bottom">bottom of page</h2>

10
  • No es posible hacerlo como <a> el stop scrolling? no me beneficia que sea un botón
    – Ivan Soler
    Commented el 28 mar. 2016 a las 22:36
  • @IvanSoler Lo actualice con a pero fijate que quiete el href, ya que da un bug visual que te manda al top de la pagina, a menos que eso quieras
    – jasilva
    Commented el 28 mar. 2016 a las 22:38
  • Perfecto, con esto que me propones... hay algún modo de hacer que la "flechita" cambie a "manita" sin el href para facilitar la comprensión del usuario?
    – Ivan Soler
    Commented el 28 mar. 2016 a las 22:41
  • Claro css, dame un segundo y edito
    – jasilva
    Commented el 28 mar. 2016 a las 22:42
  • Listo @IvanSoler un link de referencia sobre cursor w3schools.com/cssref/tryit.asp?filename=trycss_cursor
    – jasilva
    Commented el 28 mar. 2016 a las 22:44

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.