jQuery ScrollTo does not work! Help me? Can not read property 'top' of undefined

-2

Good afternoon,

I'm trying to use a jQuery functionality through a code I found on the internet. But it's not working! Can you help me fix it?

When I click on 'See More', you should scroll the page to the 'I Want to Become a Party' div.

Look:

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">
    
asked by anonymous 08.09.2018 / 19:51

1 answer

0

Your code works perfectly, if you do not put a div with the QuerEFakePart id, how do you want the code to work? You in the a tag is calling a ID with # <a href="#QueroFazerParte>" , but in the div that wants to scroll you put another id="row-11071" id and I want to MakePart you put it in the class="row row-collapse row-full-width QueroFazerParte" class. Also, I removed the ($) from the function that is doing nothing and the preventDefault () that I also did not see the pq of using it in this code. See it 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><ahref="#QueroFazerParte" target="_self" class="button white is-gloss scrollTo"  style="border-radius:99px;">
  <span>VEJA MAIS</span>
</a>

<div id="QueroFazerParte">DIV</div>
    
08.09.2018 / 20:28