jQuery Scrollto does not work! Help me? Cannot read Property 'top' of Undefined

Question

Good afternoon,

I’m trying to use a jQuery feature through a code I found on the internet. But it’s not working! You can help me fix it?

When I click on 'See more', I should scroll the page to the div 'I Want to Be a Part''.

Look at you:

BUTTON / LINK:

<a href="#QueroFazerParte" target="_self" class="button white is-gloss scrollTo"  style="border-radius:99px;">
    <span>VEJA MAIS</span>
  </a>

JQUERY:

<script type="text/javascript">
jQuery(function ($) { 
  $(".scrollTo").on('click', function(e) {
     e.preventDefault();
     var target = $(this).attr('href');
     $('html, body').animate({
       scrollTop: ($(target).offset().top)
     }, 2000);
  });
});
</script>

SCROLL TO:

<div class="row row-collapse row-full-width QueroFazerParte"  id="row-11071">

Answer 1

Your code works perfectly, if you don’t put a div with the id Querofazerparte, how do you want the code to work? You in the tag a is calling a ID with the # <a href="#QueroFazerParte>", only that in the div that wants to scroll you put another id id="row-11071" and the Querofazerparte you put in the class class="row row-collapse row-full-width QueroFazerParte". Tbm removed the ($) of Function that is doing nothing and the preventDefault() that also did not see the pq of his use in this code. See working:

$(function() { 
  $(".scrollTo").on('click', function() {

     var target = $(this).attr('href');
     $('html, body').animate({
       scrollTop: ($(target).offset().top)
     }, 2000);
  });
});

body{height: 700px;}
div{background-color: red;margin-top: 700px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a href="#QueroFazerParte" target="_self" class="button white is-gloss scrollTo"  style="border-radius:99px;">
  <span>VEJA MAIS</span>
</a>

<div id="QueroFazerParte">DIV</div>