锚点href无法跳转至页面上方div id问题求助

看起来你遇到的问题主要来自两个核心点：原生锚点默认行为与JS动画的冲突，以及数字开头id的选择器兼容问题，咱们一步步来解决：

问题拆解 #

1. 默认行为冲突：你的JS代码没有阻止浏览器的原生锚点跳转逻辑，点击链接时，浏览器会先执行原生的锚点滚动，紧接着又触发你的animate动画——两种行为叠加后，就会出现向上滚动时的异常（比如页面先跳转到目标位置，又被动画错误地拉回下方）。
2. 数字id的选择器坑：虽然HTML5允许id以数字开头，但CSS选择器规范里，id不能直接以数字作为起始字符，而jQuery的选择器依赖CSS规则，所以$('#1')这类写法在部分场景下无法正确匹配元素，直接导致offset().top的计算错误。

解决方案 #

1. 修正JS代码，阻断冲突并优化选择器 #

把你的JS代码改成下面这样，先阻止默认行为，再用更稳妥的方式匹配目标元素：

$(".test").click(function(e) {
    // 阻止浏览器原生锚点跳转，避免和自定义动画冲突
    e.preventDefault();
    // 提取锚点id，用属性选择器匹配元素（规避数字id的选择器问题）
    const targetId = this.getAttribute("href").slice(1);
    const targetElement = $(`[id="${targetId}"]`);
    // 确保目标元素存在再执行动画
    if (targetElement.length) {
        $('html, body').animate({ 
            scrollTop: targetElement.offset().top 
        }, 500);
    }
});

2. 优化HTML的id命名（可选但推荐） #

为了彻底避免选择器的兼容隐患，建议给id加上前缀（比如section-），调整后的HTML代码如下：

<a href="#section-2" class="test">Go to 2</a> 
<div id="section-1"> content </div> 
<a href="#section-1" class="test">Go to 1</a> 
<div id="section-2"> content </div><br>

对应的JS代码可以简化成更直观的写法：

$(".test").click(function(e) {
    e.preventDefault();
    const targetElement = $(this.getAttribute("href"));
    if (targetElement.length) {
        $('html, body').animate({ 
            scrollTop: targetElement.offset().top 
        }, 500);
    }
});

3. 排查原生锚点异常的额外情况 #

如果去掉JS代码后原生锚点还是不正常，大概率是页面有其他干扰因素，可以试试：

• 检查是否有其他JS代码修改了页面滚动行为
• 在控制台用document.getElementById('1').offsetTop查看目标元素的实际偏移值是否正确
• 清空浏览器缓存后刷新页面再测试

调整后不管是向上还是向下的平滑滚动，应该都能正常工作啦。

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