AngularJS路由链接与ng-include点击按钮跳转页面顶部失效问题

嘿，我来帮你搞定这两个AngularJS路由相关的滚动问题！这俩问题本质上都是AngularJS的路由机制没有自动触发滚动到顶部导致的，下面分情况给你具体的解决办法：

问题1：返回顶部按钮功能失效 #

你页面里加了<a name="top"></a>作为锚点，但AngularJS的路由会拦截原生的锚点跳转逻辑，导致这个锚点失效。咱可以换个思路，手动监听按钮点击事件，用JS强制滚动到顶部：

1. 先给返回顶部按钮加个ng-click指令（假设按钮在header.html里）：

<button ng-click="scrollToTop()">返回顶部</button>

2. 然后在对应的控制器（比如header的控制器，或者全局的app控制器）里实现这个方法：

app.controller('HeaderController', function($scope) {
  $scope.scrollToTop = function() {
    // 想要平滑滚动就用这个
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
    // 要是喜欢瞬间跳转，就换成 document.body.scrollTop = 0;
  };
});

问题2：页脚跳转后无法定位到页面顶部 #

当你点击footer里的href="#!request"触发路由切换时，AngularJS默认不会自动帮你滚到页面顶部。这时候可以搞个全局监听路由切换事件，每次路由切完就自动滚顶：

在你的AngularJS主模块里加这段代码：

var app = angular.module('yourAppName', ['ngRoute']);

app.run(function($rootScope) {
  // 监听路由切换成功的事件
  $rootScope.$on('$routeChangeSuccess', function() {
    // 路由切换完成后直接滚到顶部
    window.scrollTo(0, 0);
    // 想要平滑滚动的话，换成下面这段：
    // window.scrollTo({
    //   top: 0,
    //   behavior: 'smooth'
    // });
  });
});

额外优化：自定义锚点指令（可选） #

如果你还是想保留<a name="top"></a>这种锚点写法，可以自定义一个指令来兼容AngularJS路由：

app.directive('scrollToAnchor', function() {
  return {
    link: function(scope, element, attrs) {
      element.on('click', function(e) {
        e.preventDefault();
        // 提取锚点ID
        var anchorId = attrs.href.split('#')[1];
        // 找到对应的锚点元素
        var anchorElement = document.getElementById(anchorId) || document.getElementsByName(anchorId)[0];
        if (anchorElement) {
          // 平滑滚动到锚点位置
          anchorElement.scrollIntoView({ behavior: 'smooth' });
        }
      });
    }
  };
});

然后把返回顶部的链接改成这样：

<a href="#top" scroll-to-anchor>返回顶部</a>

这样不管是手动点返回顶部，还是通过页脚跳转页面，都能正常滚动到顶部啦！

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