如何在Express.js中实现页面滚动到指定元素？

1. 配置Express服务器 #

浏览器不会把URL中#后面的锚点内容发送给服务器，所以只需要让所有路由都返回index.html，剩下的逻辑交给前端处理即可。

• 先安装依赖（没装过的话）：

  npm install express path
  

• 服务器核心代码（app.js）：

  const express = require('express');
  const path = require('path');
  const app = express();
  const port = 3000;
  
  // 设置静态文件目录，存放HTML、CSS、JS等前端资源
  app.use(express.static(path.join(__dirname, 'public')));
  
  // 所有请求都返回index.html
  app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'public', 'index.html'));
  });
  
  app.listen(port, () => {
    console.log(`服务器运行在 http://localhost:${port}`);
  });
  

2. 前端页面处理 #

在index.html里给目标滚动元素设置对应id，再添加JS代码监听页面加载和锚点变化事件，自动触发滚动。

• index.html示例：

  <!DOCTYPE html>
  <html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>我的应用</title>
    <style>
      /* 给区块设置足够高度，方便测试滚动效果 */
      .section {
        height: 800px;
        padding: 20px;
        border: 1px solid #eee;
        margin: 20px 0;
      }
    </style>
  </head>
  <body>
    <div class="section">
      <h1>首页内容</h1>
    </div>
    <!-- 目标元素，id必须和锚点名称完全一致 -->
    <div id="about-trigger" class="section">
      <h1>关于我们</h1>
      <p>这就是需要滚动到的区域</p>
    </div>
    <div class="section">
      <h1>更多内容</h1>
    </div>
  
    <script>
      // 页面加载完成后检查锚点
      window.addEventListener('load', handleScrollToAnchor);
      // 监听锚点变化（比如点击页面内的锚链接）
      window.addEventListener('hashchange', handleScrollToAnchor);
  
      function handleScrollToAnchor() {
        const hash = window.location.hash;
        if (!hash) return;
        
        const targetId = hash.slice(1); // 去掉URL中的#号
        const targetElement = document.getElementById(targetId);
        
        if (targetElement) {
          // 平滑滚动到目标元素，去掉behavior参数则使用默认滚动方式
          targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }
      }
    </script>
  </body>
  </html>
  

3. 测试验证 #

• 启动服务器：node app.js
• 访问http://localhost:3000/，页面正常加载首页内容
• 访问http://localhost:3000/#about-trigger，页面加载后会自动滚动到id="about-trigger"的元素位置
• 也可以在页面内添加锚点链接，比如<a href="#about-trigger">跳转到关于我们</a>，点击后同样能触发滚动效果

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