WordPress Twenty Seventeen主题：如何自定义滚动箭头的JavaScript文件

你找的jquery.scrollTo.js是底层的滚动插件，但实际控制这个箭头滚动逻辑的代码在主题自己的JavaScript文件里，不是插件文件哦～ 下面是具体的修改步骤：

1. 找到主题的核心JS文件 #

打开主题目录 wp-content/themes/twentyseventeen/assets/js/，里面的twentyseventeen.js（未压缩版，方便编辑）或者twentyseventeen.min.js（压缩版，需要格式化后查看）就是你要找的文件。

2. 定位滚动逻辑代码 #

在这个文件里搜索 .menu-scroll-down，你会找到类似这样的代码块：

$('.menu-scroll-down').on('click', function(e) {
    e.preventDefault();
    $(window).scrollTo('#content', {
        duration: 600, // 这里就是滚动速度（单位：毫秒）
        offset: -$('.site-header').height()
    });
});

其中的duration参数就是控制滚动快慢的关键——数值越大，滚动越慢；数值越小，滚动越快。比如把600改成1000，滚动就会变成1秒完成；改成300就是更快的滚动效果。

3. 避免主题更新覆盖修改（重要） #

直接修改主题自带的JS文件，等主题更新后你的修改会被覆盖。推荐用子主题或者自定义代码的方式来实现：

• 如果你用子主题：
  1. 在子主题目录创建js/custom-scroll.js文件，写入以下代码：

  jQuery(document).ready(function($) {
      // 先移除原有的点击事件，再绑定新的
      $('.menu-scroll-down').off('click').on('click', function(e) {
          e.preventDefault();
          $(window).scrollTo('#content', {
              duration: 1000, // 这里设置你想要的速度
              offset: -$('.site-header').height()
          });
      });
  });
  

  2. 在子主题的functions.php里添加代码，加载这个自定义脚本：

  function custom_scroll_speed_script() {
      wp_enqueue_script( 'custom-scroll-speed', get_stylesheet_directory_uri() . '/js/custom-scroll.js', array( 'jquery', 'jquery-scrollto' ), '', true );
  }
  add_action( 'wp_enqueue_scripts', 'custom_scroll_speed_script' );
  

• 如果你不想折腾子主题，也可以在WordPress后台的「外观」→「自定义」→「额外CSS/JS」（有些主题自带这个模块，或者用插件添加）里直接插入上面的JS代码。

这样修改后，既实现了自定义滚动速度，又不用担心主题更新丢失修改啦～

内容的提问来源于stack exchange，提问作者Ben Viatte