如何阻止点击点赞按钮时网页滚动到顶部（Node.js、Mongoose）

你的问题根源是<a>标签点击后会触发页面跳转刷新，导致页面回到顶部。要保持当前位置，核心是避免页面刷新，改用异步请求处理点赞逻辑，同时阻止a标签的默认跳转行为。

具体实现步骤： #

1. 修改HTML结构：给点赞按钮添加类名，给点赞数单独加个标签方便后续更新

<a href="/likeComment/{{../post._id}}/{{_id}}" class="like-btn"> 
  <i class="fa-solid fa-thumbs-up"></i>
  <span class="like-count">{{likes.length}}</span> Like
</a> 

2. 添加JavaScript逻辑：监听点击事件，阻止默认跳转，异步请求点赞接口并更新点赞数

// 遍历所有点赞按钮绑定事件
document.querySelectorAll('.like-btn').forEach(btn => {
  btn.addEventListener('click', async (e) => {
    // 阻止a标签默认跳转行为
    e.preventDefault();
    // 获取点赞接口地址
    const apiUrl = btn.getAttribute('href');

    try {
      // 发送异步请求（根据后端接口调整请求方法，比如GET/POST）
      const res = await fetch(apiUrl, {
        method: 'POST',
        credentials: 'include' // 保留登录态Cookie，若后端需要
      });

      if (res.ok) {
        // 成功后更新页面点赞数
        const countEl = btn.querySelector('.like-count');
        countEl.textContent = parseInt(countEl.textContent) + 1;
      }
    } catch (err) {
      console.error('点赞失败:', err);
      // 可在此添加错误提示，比如alert('点赞失败，请重试')
    }
  });
});

补充说明： #

• 确保后端的/likeComment/接口支持异步请求，处理完点赞逻辑后返回成功响应即可，不需要跳转页面
• 如果后端原本是GET请求，把method: 'POST'改成method: 'GET'即可
• 这种方式完全不会触发页面刷新，自然也就不会滚动到顶部，同时保留了点赞功能的正常运行

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