I’m trying to have a data-scrollto function which animates scrolling in a one-page sharepoint site I have.

Currently this is the html I’m using:

<a href="#ABOUTUS" data-scrollto="#ABOUTUS">About</a>

which should scrollto:

<h3 id="ABOUTUS">About us</h3>

This is the JS I’m using:

       $  ("a[data-scrollto]").click(function(){          var divScrollToAnchor = $  (this).attr('data-scrollto');          if( $  ().scrollTo ) { jQuery.scrollTo( $  ( divScrollToAnchor ) , 400, {offset:-20} ); }          return false;      });       $  ('[data-animate]').each(function(){          var $  toAnimateElement = $  (this);          var toAnimateDelay = $  (this).attr('data-delay');          var toAnimateDelayTime = 0;          if( toAnimateDelay ) { toAnimateDelayTime = Number( toAnimateDelay ) + 500; } else { toAnimateDelayTime = 500; }          if( !$  toAnimateElement.hasClass('animated') ) {              $  toAnimateElement.addClass('not-animated');              var elementAnimation = $  toAnimateElement.attr('data-animate');              $  toAnimateElement.appear(function () {                  setTimeout(function() {                     $  toAnimateElement.removeClass('not-animated').addClass( elementAnimation + ' animated');                 }, toAnimateDelayTime);              },{accX: 0, accY: -80},'easeInCubic');          }      }); 

Any ideas, folks?