animating an anchor link - Wordpress

Question

I have an anchor link set up in my Wordpress site which links from the navigation to the footer.

HTML - footer.php

<footer id="footer-anchor">

  <div class="row"> 

    ...

The when the link is selected the page 'jumps' to the footer. I want it to animate down to the footer. Similar to how pages animated to the top with a 'back to top' button, but in reverse.

not sure how to link that using Wordpress – user3550879 Aug 24 '15 at 01:47 — user3550879, Aug 24 '15 at 01:47

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

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 !!!

I am trying to code this without plug-ins, custom theme for one use and user — user3550879, Aug 24 '15 at 06:29
@user3550879 I have updated my answer. This way I show you how to use only jQuery in your WordPress site. please take a look at it :) — Pakpoom Tiwakornkit, Aug 24 '15 at 10:54

Kory · Accepted Answer · 2015-08-24T03:09:33.680

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);

what do i need to change so that it links my #footer-anchor in the nag to the #footer-anchor id in the footer? — user3550879, Aug 24 '15 at 06:26
You don't need to change anything, this script automatically looks for `` tags that link to content on the same page. — Kory, Aug 29 '15 at 10:49

animating an anchor link - Wordpress

2 Answers2