animating an anchor link

This question already has an answer here:

How to scroll up or down the page to an anchor using jQuery? 10 answers

jQuery scroll to element 24 answers

---

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

---

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

链接地址: http://www.djcxy.com/p/23100.html

上一篇: 我如何滚动到webforms texetBox使用c中的特定行＃

下一篇: 动画锚链接