0

no puedo hacer un Scroll progresivo desde una animación de texto hacia la sección contacto.

div class="wrapper">
    <article id="shufle">
        <div class="container">


        <p class="fading-texts text-center">
            <span>kljljljllj</span> 
            <span>lkjljljljkljljljljljjlj </span>
            <span>lkjkljkljkljljl </span>
            <!-- <span>kjlkkjlkjljlj</span> -->
            <span>Ponte en contacto conmigo  <a class="goto" href="#contact">para una cita. Es rápido y fácil</a></span>
        </p>

        <p class="read-on">
            <a href="#about" class="goto">
            <span class="goDown">
            <i class="fa fa-chevron-down fa-cog-white"></i>
            </span>
            <span class="htxt">Read on </span>
            </a>
        </p>
    </div>
</article>

Desde el span que tiene el enlace con la clase goto, es donde no me funciona tambíen en el parrafo "read-on" tengo un ancla con la misma clase .goto y esta ancla si me funciona bien el scroll. El menú principal tambíen me funciona el scroll progresivo.

el .js lo tengo asi.

$('nav a').click(function(e){
    e.preventDefault();
    $('html, body').stop().animate({scrollTop: $($(this).attr('href')).offset().top}, 1000);
});


$('.goto').click(function(e){
  e.preventDefault();
  var href = $(this).attr('href');
  var offsetTop = $(href).offset().top;
  $('html,body').animate({scrollTop: offsetTop}, 1000);
});
2

1 respuesta 1

1

Esto te funcionará...

Hice un sencillo ejemplo añadiendo algunos elementos para simular más o menos lo que pretendes:

$('.goto').click(function(e){
  e.preventDefault();
  var href = $(this).attr('href');
  var offsetTop = $(href).offset().top;
  $('html,body').animate({scrollTop: offsetTop}, 1000);
});
#contact {
    background: red;
    color: #fff;
    padding: 25px;
}
#space {
    height: 1500px;
    width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span>Para contactar puedes escribirme a <a href="#contact" class="goto">[email protected]</a></span>

<div id="space"></div>
<div id="contact">
   Contacto:
</div>

Espero que sirva de ayuda

3
  • no me funciona, no puedo usar el selector generico $('a').click(function(e){ por que me afecta en otras secciones de la web. he probado poniendo la clase del enlace donde quiero hacer el efecto, he puesto $('goto').click(function(e){ pero no funciona Commented el 24 jun. 2017 a las 15:28
  • @RafaelHernández ya actualicé la respuesta, y es $('.goto') y NO $('goto').
    – lromeraj
    Commented el 24 jun. 2017 a las 15:34
  • correo.es es potencialmente un dominio válido. En estos casos es mejor usar example.com
    – Rubén
    Commented el 24 jun. 2017 a las 15:56

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.