I can not make a soft Scroll

Navigation
-1

I can not do a progressive Scroll from a text animation to the contact section. 

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>

From the span that has the link to the goto class, it is where I do not work also in the paragraph "read-on" I have an anchor with the same class .goto and this anchor if the scroll works well. The main menu also works progressive scrolling.

the .js I have it like that. 

$('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);
});
    
asked by Rafael Hernández 24.06.2017 в 16:19
source

1 answer

1

This will work for you ...

I made a simple example by adding some elements to simulate more or less what you intend: 

$('.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>

I hope it helps.

    
answered by 24.06.2017 в 17:13
Error when importing stylesheet in html page Mongodb and dates