Php 为锚定链接设置动画-Wordpress

我在我的Wordpress网站上设置了一个锚链接，从导航链接到页脚

HTML-footer.php

<footer id="footer-anchor">

  <div class="row"> 

    ...

...

当选择链接时，页面“跳转”到页脚。我希望它的动画一直到页脚。与使用“返回顶部”按钮将页面动画设置到顶部的方式类似，但相反。

如何？它在我的WordPress网站上运行良好。我们可以在几分钟内在管理员页面上轻松设置，我们已经完成了。这个插件就是你正在寻找的。请检查此链接

更新：如果您不想使用插件，请按照以下步骤操作。我们将使用纯粹的jQuery插件，令人惊讶的是，代码工作起来很有魅力，看起来很简单

1。准备WordPress主题

用一些类来包装你的菜单，我们马上就会用到这个类。例如：

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

3。将脚本排队（以WordPress的方式包括脚本）

4。再次运行您的网站

---

祝贺你

我喜欢从中使用此代码，我通常在

标记前面的footer.php文件中使用

将其包含在

文件中，或者您可以将其放入functions.php文件中并将其加载到页脚中。我喜欢这段代码，因为一旦你点击锚，它就会从URL中删除散列

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 [];
      }
});

---

不确定如何使用WordPress链接，我需要更改什么，以便将nag中的#页脚锚链接到页脚中的#页脚锚id？您不需要更改任何内容，此脚本会自动查找链接到同一页面上内容的

标记。我正在尝试在没有插件的情况下编写此代码，自定义主题供一次使用和user@user3550879我已经更新了我的答案。通过这种方式，我向您展示了如何在WordPress站点中仅使用jQuery。请看一看：）

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

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 [];
      }
});

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