点击锚点链接显示隐藏div时如何阻止页面上滚

问题根源 #

你遇到的页面滚动到顶部的问题，大概率是因为目标div处于隐藏状态时，offset().top获取的位置不准确（隐藏元素的偏移量计算会出错，通常返回0），导致滚动到页面顶部。

修正后的代码 #

替换你现有的jquery.jump.js内容为以下代码：

$(document).ready(function() {
  // 绑定所有锚点链接的点击事件
  $('a[href^="#"]').on('click', function(e) {
    e.preventDefault();
    const targetSelector = $(this).attr('href');
    const $targetElement = $(targetSelector);

    // 先确保目标元素可见（根据你页面的隐藏方式调整，比如用removeClass('hidden')）
    if ($targetElement.is(':hidden')) {
      $targetElement.show();
    }

    // 获取目标元素正确的顶部偏移量并滚动
    const targetTop = $targetElement.offset().top;
    $('html, body').animate({ scrollTop: targetTop }, 'fast');
  });
});

额外检查项 #

• 确认页面已正确引入jQuery，且你的jquery.jump.js是在jQuery之后加载的。
• 检查链接的href属性是否与对应div的id完全匹配（比如链接href="#boleira1"，对应div的id必须是boleira1）。
• 如果页面的隐藏元素是通过visibility: hidden或自定义类（比如.hidden）实现的，把代码里的$targetElement.show()改成对应的显示方式，比如$targetElement.removeClass('hidden')。

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