水平滚动三区块网页如何在页面加载时自动定位到中间区块

核心实现逻辑无需用到URL锚点，页面加载完成后通过原生JS自动定位到中间区块即可，对访客访问完全无感知，代码量极少，新手直接复制粘贴即可使用。

步骤1：给中间区块添加唯一标识 #

在你现有HTML代码里，找到中间区块的标签，添加id="middle-section"属性即可，示例结构参考：

<!-- 你的水平滚动容器 -->
<div class="你的滚动容器类名">
  <div class="你的区块类名">左侧内容</div>
  <!-- 只需要给中间区块加这一行id -->
  <div class="你的区块类名" id="middle-section">中间内容</div>
  <div class="你的区块类名">右侧内容</div>
</div>

步骤2：复制粘贴定位脚本 #

把以下代码放到你页面</body>结束标签的前面即可，不需要做任何修改直接生效：

window.addEventListener('load', function() {
  // 自动滚动到中间区块
  document.getElementById('middle-section').scrollIntoView({
    behavior: 'auto', // 需要平滑滚动效果就把值改成'smooth'
    block: 'nearest',
    inline: 'center'
  });
});

可选调整说明 #

• 如果不想给中间区块加id，也可以通过索引获取，比如三个区块都是滚动容器的直接子元素，就把JS代码里document.getElementById('middle-section')替换成document.querySelector('.你的滚动容器类名').children[1]即可
• 该方案兼容所有现代浏览器，不会修改URL地址，完全不影响主域名直接访问的体验

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