jQuery点击事件在Safari中触发页面跳转至顶部的问题排查求助

我特别理解你遇到的这个跨版本iOS浏览器兼容性问题——旧版iOS和桌面Chrome都正常，偏偏iOS11的iPhone上就触发了不必要的滚动到顶部，而且加了event.preventDefault()和return false都没用，确实挺闹心的。

结合你的问题场景和已尝试的方案，我梳理了可能的原因和对应的解决办法：

一、最核心的原因：<a>标签的href="#"触发了iOS锚点行为 #

iOS 11及以上的Safari（包括iOS端的Chrome，因为它复用了Safari内核）对href="#"的处理逻辑有调整：即便你在click事件里阻止了默认行为，浏览器仍可能优先解析锚点，触发滚动到页面顶部的动作，这个行为的优先级甚至高于你绑定的click事件处理代码。

对应解决方案： #

修改链接的href属性，彻底避免锚点解析：

• 方案1：把href="#"替换为href="javascript:void(0)"，让浏览器不会将其识别为锚点
• 方案2：如果不需要<a>标签的默认样式，直接换成<span>标签，再添加cursor: pointer的CSS样式，确保用户能识别这是可点击元素

二、补充优化：同时拦截触摸事件的默认行为 #

iOS上的点击事件是基于触摸事件（touchstart/touchend）模拟的，有时候仅阻止click事件的默认行为不够，还需要拦截触摸事件的默认动作：

jQuery('#click').on('click touchstart', function(event){
    // 阻止所有默认行为，包括触摸和点击动作
    event.preventDefault();
    // 阻止事件冒泡，避免父元素的事件逻辑干扰
    event.stopPropagation();
    // 执行你的抽屉展开逻辑
    // ...
    return false;
});

三、排查CSS定位的潜在影响 #

如果你的页脚用了position: fixed定位，iOS 11的Safari在处理fixed元素的点击时，可能会因为滚动重绘的bug触发滚动到顶部。可以尝试：

• 给页脚容器添加-webkit-overflow-scrolling: touch;属性
• 检查是否有transform这类CSS属性干扰了fixed元素的正常渲染

为什么iOS 7正常？ #

iOS 7的Safari事件处理逻辑和后续版本差异较大，旧版本对锚点的处理优先级更低，你的preventDefault()代码能正常生效；而iOS 11之后浏览器优化了锚点解析的逻辑，导致你的阻止代码没来得及拦截默认行为。

你可以先尝试修改href属性的方案，这是最直接解决锚点触发滚动的办法，应该能快速解决你的问题。

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