Scrollify插件与导航按钮交互异常问题求助

问题根源 #

1. 跳转目标与区块ID不匹配：第一个菜单选项跳转目标为#1，但对应区块ID是Home，Scrollify找不到目标时会默认跳转到第一个区块，且updateHash: true会将错误Hash写入URL，再次打开菜单时触发自动跳转。
2. 菜单事件冲突：菜单选项的for="menu-icon"属性会触发checkbox状态切换，与Scrollify的Hash更新机制产生冲突，导致页面状态异常。
3. 动画触发误判：菜单展开/关闭的动画可能被Scrollify的滚动检测逻辑误识别，引发自动跳转。

解决方案 #

方案1：修正跳转目标与区块ID匹配

确保所有scrollify.move()的目标与对应区块ID一致：

• 若第一个区块ID为Home，修改Home选项的点击事件：

  <li><label for="menu-icon" onclick="$.scrollify.move('#Home');">Home</label></li>
  

• 或统一将区块ID改为1、2、3等，与菜单跳转目标对应。

方案2：移除菜单label的for属性，手动控制菜单关闭

避免for属性触发的事件冲突，改用JS手动关闭菜单：

1. 修改HTML菜单选项标签：

   <li><span onclick="goToSection('#Home');">Home</span></li>
   <li><span onclick="goToSection('#2');">La nostra storia</span></li>
   <!-- 其余选项同理 -->
   

2. 添加JS函数：

   function goToSection(target) {
     $.scrollify.move(target);
     $('#menu-icon').prop('checked', false); // 手动关闭菜单
   }
   

方案3：菜单状态切换时禁用/启用Scrollify

通过监听checkbox状态，在菜单打开时禁用Scrollify，避免误触发：

$(function() {
  $.scrollify({
    section : ".scroll-div",
    sectionName : "section-name",
    easing: "easeOutExpo",
    scrollSpeed: 700,
    offset : 0,
    scrollbars: false,
    standardScrollElements: "",
    setHeights: true,
    overflowScroll: true,
    updateHash: true,
    touchScroll:true,
    before:function() {},
    after:function() {},
    afterResize:function() {},
    afterRender:function() {}
  });

  // 监听菜单开关
  $('#menu-icon').on('change', function() {
    $(this).is(':checked') ? $.scrollify.disable() : $.scrollify.enable();
  });
});

方案4：关闭Scrollify的Hash更新功能

若无需URL Hash同步区块状态，可关闭该选项：

$.scrollify({
  // 其余配置不变
  updateHash: false,
  // 其余配置不变
});

内容的提问来源于stack exchange，提问作者Alessandro Punzo