animating an anchor link – WordPress

2 comments

1. How about Page-Scroll-To-ID plugin ? It works fine in my WordPress website. We can set it up easily on admin page within minutes, and we done. This plugin is what you are looking for. Please check this link up Page-Scroll-To-ID plugin tutorial

   Update : if you don’t want to use plug-ins, please follow these steps. We will use just purely jQuery plug-ins, and surprisingly, the code works like a charm and look simple !!!

   1. Preparing your WordPress Theme

   Wrap your menu with some class that we will use this one in a moment. For example:

   <nav id='scrollNav'>
      <?php wp_nav_menu(array('theme_location'  => 'your-menu-location', 'container'=>false, 'depth'=>1) ?>
   </nav>
   

   Then add id to your specific element, but you have already add id to your footer element, which is #footer-anchor.

   2. Coding your javascript, we will use only jQuery

   (function($){
      $("#scrollNav").find("a").click(function(){
          var $targetElm = $($(this).attr("href"));
          $('html,body').animate({scrollTop: $targetElm.offset().top},
       'slow');
      });
   })(jQuery)
   

   3. Enqueue your script (include your script in WordPress’s way)

   function your_scripts_method() {
       wp_enqueue_script(
           'your-script',
           get_stylesheet_directory_uri() . '/js/your_script.js',
           array( 'jquery' )
       );
   }
   
   add_action( 'wp_enqueue_scripts', 'your_scripts_method' );
   

   4. Run your website again

   Congratulation !!!

2. I like to use this code from Karl Swedberg, I typically include it using a <script></script> in my footer.php file just before the </body> tag or you could enqueue it in your functions.php file and have it load in the footer. I like this code because it removes the #hash from the URL once you click on the anchor.

   jQuery(document).ready(function($){
       // From: http://www.learningjquery.com/2007/10/improved-animated-scrolling-script-for-same-page-links/
       function filterPath(string) {
         return string
           .replace(/^//,'')
           .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
           .replace(//$/,'');
         }
         var locationPath = filterPath(location.pathname);
         var scrollElem = scrollableElement('html', 'body');
        
         $('a[href*=#]').each(function() {
           var thisPath = filterPath(this.pathname) || locationPath;
           if (  locationPath == thisPath
           && (location.hostname == this.hostname || !this.hostname)
           && this.hash.replace(/#/,'') ) {
             var $target = $(this.hash), target = this.hash;
             // Added line below from previous version
             target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
             if (target) {
               var targetOffset = $target.offset().top;
               $(this).click(function(event) {
                 event.preventDefault();
           $(scrollElem).animate({
               scrollTop: targetOffset
           }, 400);
             return false;
               });
             }
           }
         });
        
         // use the first element that is "scrollable"
         function scrollableElement(els) {
           for (var i = 0, argLength = arguments.length; i <argLength; i++) {
             var el = arguments[i],
                 $scrollElement = $(el);
             if ($scrollElement.scrollTop()> 0) {
               return el;
             } else {
               $scrollElement.scrollTop(1);
               var isScrollable = $scrollElement.scrollTop()> 0;
               $scrollElement.scrollTop(0);
               if (isScrollable) {
                 return el;
               }
             }
           }
           return [];
         }
   });
   

   You can control the speed of the scroll by changing the number in this part of the code:

   $(scrollElem).animate({
       scrollTop: targetOffset
   }, 400);
   

Comments are closed.