求助：WordPress中用jQuery实现侧边栏菜单锚点链接及自动关闭滚动

作为WordPress和jQuery新手，别担心，这两个问题其实很好解决，咱们一步步来：

第一步：确保HTML结构匹配 #

首先得让菜单项和对应section的ID精准对应上，这是实现功能的基础。假设你的侧边栏和页面section结构是这样的（如果你的实际结构不同，调整类名/ID即可）：

<!-- 侧边栏菜单 -->
<div class="sidebar" id="main-sidebar">
  <ul class="sidebar-menu">
    <li><a href="#home" class="sidebar-link">首页</a></li>
    <li><a href="#about" class="sidebar-link">关于我们</a></li>
    <li><a href="#services" class="sidebar-link">服务</a></li>
    <li><a href="#contact" class="sidebar-link">联系我们</a></li>
  </ul>
  <!-- 假设侧边栏靠激活类控制显示隐藏，也可以是你自己的关闭按钮逻辑 -->
</div>

<!-- 页面中的目标sections -->
<section id="home">首页内容</section>
<section id="about">关于我们内容</section>
<section id="services">服务内容</section>
<section id="contact">联系我们内容</section>

核心注意点：每个侧边栏链接的href属性要和对应section的id完全一致（比如#about对应id="about"），这样jQuery才能准确找到目标位置。

第二步：编写jQuery实现交互逻辑 #

因为WordPress默认启用了jQuery的无冲突模式，不能直接用$，我们可以用两种方式写代码，选你顺手的就行：

方式1：自执行函数包裹（推荐，可正常用$） #

(function($) {
  $(document).ready(function() {
    // 监听侧边栏菜单链接的点击事件
    $('.sidebar-link').on('click', function(e) {
      // 阻止浏览器默认的锚点跳转行为
      e.preventDefault();
      
      // 从链接的href里获取目标section的ID
      var targetSection = $(this).attr('href');
      
      // 关闭侧边栏：移除激活类（假设你的侧边栏靠.sidebar-active类控制显示）
      $('#main-sidebar').removeClass('sidebar-active');
      // 如果你的侧边栏是靠body类控制（比如body.sidebar-open），就改成 $('body').removeClass('sidebar-open');
      
      // 平滑滚动到目标section
      $('html, body').animate({
        scrollTop: $(targetSection).offset().top
      }, 800); // 800是滚动动画时长，单位毫秒，可根据需求调整
    });
  });
})(jQuery);

方式2：直接使用jQuery（不用$） #

jQuery(document).ready(function() {
  jQuery('.sidebar-link').on('click', function(e) {
    e.preventDefault();
    var targetSection = jQuery(this).attr('href');
    jQuery('#main-sidebar').removeClass('sidebar-active');
    jQuery('html, body').animate({
      scrollTop: jQuery(targetSection).offset().top
    }, 800);
  });
});

关键代码解释 #

1. 阻止默认行为：e.preventDefault()是为了不让浏览器直接跳转到锚点，而是执行我们自定义的平滑滚动+关闭侧边栏逻辑。
2. 关闭侧边栏：这里假设侧边栏是通过添加/移除sidebar-active类来控制显示隐藏的（比如默认侧边栏left:-100%，添加类后left:0），如果你的实现方式不同，把这行改成你控制侧边栏隐藏的逻辑即可（比如触发关闭按钮的点击事件）。
3. 平滑滚动：animate()方法实现滚动动画，scrollTop: $(targetSection).offset().top是获取目标section距离页面顶部的距离，然后让页面滚动到该位置。

WordPress规范提示（可选但推荐） #

不要直接把代码写在模板文件里，建议通过WordPress的脚本加载规范来添加：

1. 在主题文件夹新建js/custom-sidebar.js，把上面的jQuery代码放进去。
2. 在主题的functions.php里添加以下代码：

   function custom_sidebar_scripts() {
     wp_enqueue_script('custom-sidebar', get_template_directory_uri() . '/js/custom-sidebar.js', array('jquery'), '1.0', true);
   }
   add_action('wp_enqueue_scripts', 'custom_sidebar_scripts');
   

这样能确保jQuery先加载，也符合WordPress的开发规范。

如果你的侧边栏HTML结构和示例不同，只需要把代码里的选择器（比如.sidebar-link、#main-sidebar）改成你实际的类名/ID就可以啦！

内容的提问来源于stack exchange，提问作者MA-2016