动画锚链接 - Wordpress [复制]

Question

This question already has an answer here:

• How to scroll up or down the page to an anchor using jQuery? 13 answers
• jQuery scroll to element 29 answers

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.

</div>

Answer 1

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