AngularJS: 点击分页跳转时如何触发整页刷新以回到页面顶部

解决方案 #

你当前分页走无刷新逻辑的核心原因是pagination-link="true"属性被前端JS监听，拦截了默认跳转行为实现局部更新，按以下两个方案任选其一即可实现整页刷新+自动回顶效果： #

方案1：修改分页组件配置（优先推荐）

你调用的_pagination辅助函数目前生成的链接默认带无刷新标记，直接调整调用参数关闭客户端局部加载逻辑即可：

1. 首先确认你代码中分页key一致性：你贴出的a标签key为_page_60_resources_repeatingsection1，但_pagination调用传入的是_page_50_resources_repeatingsection1，先修正为统一的分页参数名
2. 调整_pagination参数：将现有route: reload替换为你当前页面的路由标识，或者增加client_side: false参数（不同框架参数名可能略有差异，作用是关闭前端无刷新绑定，让a标签走原生跳转）
   原生整页跳转默认会自动回到页面顶部，不需要额外写逻辑。

方案2：前端JS兜底方案

如果没法修改分页组件的生成逻辑，直接在页面引入以下JS即可覆盖原有点击行为：

// 监听所有分页链接点击
document.querySelectorAll('a[pagination-link="true"]').forEach(paginationLink => {
  paginationLink.addEventListener('click', function(e) {
    // 阻止原有无刷新逻辑执行
    e.preventDefault();
    e.stopImmediatePropagation();
    // 触发整页跳转
    window.location.href = this.href;
  })
})

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