2

Quiero que el scroll vaya hasta abajo del sitio (o por lo menos 100px) cuando hago clic en el calendario, para poder ver las opciones de reserva.

Estoy utilizando el siguiente código, pero no hace nada y en el debugger de Chrome no me muestra ningún error. ¿Alguna idea? El código lo estoy poniendo en el header.php (Wordpress)

Sitio: http://sparkkstudio.com/havanacubatours/tours/city-tour-santiago-de-cuba-morro-cobre/

$('.ui-state-default').click(function () {
   $('html, body').animate({
       scrollTop: $(document).height()
   }, 'slow');
   return false;
});

2 respuestas 2

2

Error:

Al incluirlo en header.php tu script se esta ejecutando cuando aún no se termino de cargar por completo la página y el elemento con clase .ui-state-default aún no existe.

Solución:

Has uso de $(function(){}) para que tu script se ejecute en el onload.

Por ejemplo así:

$(function(){
  $('.ui-state-default').click(function () {
    $('html, body').animate({
       scrollTop: $(document).height()
    }, 'slow');
    return false;
  });
});
.ui-state-default {
  position: absolute;
  top: 20px;
  left: 50%;
  padding: 5px 10px;
  background: #f00;
  color: #fff;
  cursor: pointer
}
.ui-state-default:hover {
  text-decoration: none;
  background: #f99;
  color: #fff;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <a class="ui-state-default">Ir al fondo</a>
    <div class="container">

      <div class="blog-header">
        <h1 class="blog-title">The Bootstrap Blog</h1>
        <p class="lead blog-description">The official example template of creating a blog with Bootstrap.</p>
      </div>

      <div class="row">

        <div class="col-sm-8 blog-main">

          <div class="blog-post">
            <h2 class="blog-post-title">Sample blog post</h2>
            <p class="blog-post-meta">January 1, 2014 by <a href="#">Mark</a></p>

            <p>This blog post shows a few different types of content that's supported and styled with Bootstrap. Basic typography, images, and code are all supported.</p>
            <hr>
            <p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>
            <blockquote>
              <p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong> ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
            </blockquote>
            <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
            <h2>Heading</h2>
            <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
          </div><!-- /.blog-post -->

        </div><!-- /.blog-main -->

        <div class="col-sm-3 col-sm-offset-1 blog-sidebar">
        </div><!-- /.blog-sidebar -->

      </div><!-- /.row -->

    </div><!-- /.container -->

    <footer class="blog-footer">
      <p>Blog template built for <a href="http://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
    </footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

2
0

te dejo este codigo

$(function () {
            $('#verMas').bind("click", function () {
                var dest = $("#one").offset().top;
                $("html, body").animate({scrollTop: dest},600);
            });

        });

"#verMas" es el id del boton donde haces el click "#one" es el div al que quieres llegar

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.