动画锚链接

这个问题在这里已经有了答案：

如何使用jQuery向上或向下滚动页面到锚点？ 10个答案

jQuery滚动到元素24的答案

---

我喜欢使用Karl Swedberg的这段代码，我通常在</body>标记前的footer.php文件中使用<script></script>来包含它，或者您可以将它排入函数 .php文件中它加载在页脚中。 我喜欢这段代码，因为一旦你点击锚点，它就会从URL中删除#hash。

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

---

怎么样页面滚动到ID插件？ 它在我的WordPress网站中工作正常。 我们可以在几分钟内轻松地在管理页面上设置它，然后完成。 这个插件是你正在寻找的。 请检查这个链接页面滚动到ID插件教程

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

1.准备你的WordPress主题

用一些我们稍后会用到的课程来包装你的菜单。 例如：

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

然后将id添加到您的特定元素，但是您已将id添加到您的footer元素，即#footer-anchor 。

2.编码你的javascript，我们将只使用jQuery

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

3.排队你的脚本（包括你的脚本在WordPress的方式）

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.再次运行您的网站

恭喜 ！！！

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

上一篇: animating an anchor link

下一篇: How to scroll vertically to a line, in HTML automatically?