如何阻止Fancybox弹窗滚动到锚点并停留在内容顶部？

我清楚你碰到的问题：当Fancybox弹窗内容里包含空href=""的锚点链接时，弹窗会自动滚动到该链接的位置，而非停留在内容顶部。虽然移除空href属性能恢复正常，但如果需要保留链接元素，不妨试试下面几种解决方案：

方法1：利用afterShow回调强制滚动到顶部 #

在初始化Fancybox时，添加afterShow回调函数，弹窗显示完成后，强制将滚动容器定位到顶部，彻底规避锚点滚动的影响：

$(".test").fancybox({
  autoCenter: true,
  smallBtn: false,
  afterShow: function() {
    // 定位Fancybox的滚动容器并滚动到顶部
    $('.fancybox-content').scrollTop(0);
  }
});

方法2：修改空href链接属性（推荐） #

如果允许调整HTML，把空href=""的链接改成href="javascript:void(0)"，既能保留链接的样式和交互感，又不会触发锚点滚动行为：

<!-- 原链接 -->
<a href="">Test</a>

<!-- 修改后 -->
<a href="javascript:void(0)">Test</a>

要是不想直接改HTML，也可以用JS批量处理弹窗内的空href链接，阻止其默认行为：

// 初始化弹窗前处理所有空href链接
$('#popup a[href=""]').on('click', function(e) {
  e.preventDefault();
});

方法3：禁用Fancybox的锚点处理逻辑 #

Fancybox默认会处理弹窗内的锚点链接，我们可以在beforeShow回调中提前拦截这类行为：

$(".test").fancybox({
  autoCenter: true,
  smallBtn: false,
  beforeShow: function() {
    // 阻止弹窗内空href链接触发滚动
    this.$content.find('a[href=""]').on('click', function(e) {
      e.preventDefault();
    });
  }
});

修改后的完整代码示例 #

HTML代码 #

<a class="test" href="javascript:void(0);" data-fancybox data-src="#popup">test</a>
<div style="display: none;" id="popup">
  <div class="popup-wrap">
    <div class="popup-header">
      <h4>Title</h4>
    </div>
    <div class="popup-text">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde omnis nulla beatae, a aliquam voluptates eius voluptas corporis nostrum reiciendis dignissimos dolore quaerat vero dolor voluptatem laudantium, minus architecto quibusdam.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde omnis nulla beatae, a aliquam voluptates eius voluptas corporis nostrum reiciendis dignissimos dolore quaerat vero dolor voluptatem laudantium, minus architecto quibusdam.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde omnis nulla beatae, a aliquam voluptates eius voluptas corporis nostrum reiciendis dignissimos dolore quaerat vero dolor voluptatem laudantium, minus architecto quibusdam.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde omnis nulla beatae, a aliquam voluptates eius voluptas corporis nostrum reiciendis dignissimos dolore quaerat vero dolor voluptatem laudantium, minus architecto quibusdam.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde omnis nulla beatae, a aliquam voluptates eius voluptas corporis nostrum reiciendis dignissimos dolore quaerat vero dolor voluptatem laudantium, minus architecto quibusdam.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde omnis nulla beatae, a aliquam voluptates eius voluptas corporis nostrum reiciendis dignissimos dolore quaerat vero dolor voluptatem laudantium, minus architecto quibusdam.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde omnis nulla beatae, a aliquam voluptates eius voluptas corporis nostrum reiciendis dignissimos dolore quaerat vero dolor voluptatem laudantium, minus architecto quibusdam.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde omnis nulla beatae, a aliquam voluptates eius voluptas corporis nostrum reiciendis dignissimos dolore quaerat vero dolor voluptatem laudantium, minus architecto quibusdam.</p>
      <a href="javascript:void(0)">Test</a>
    </div>
  </div>
</div>

JS代码 #

$(".test").fancybox({
  autoCenter: true,
  smallBtn: false,
  afterShow: function() {
    $('.fancybox-content').scrollTop(0);
  }
});

这样处理后，弹窗打开时就会稳定停留在内容顶部，不会再自动滚动到空href链接的位置了。

内容的提问来源于stack exchange，提问作者Felix A J