Question

我正在使用Angular 1.4和Grails构建SPA。在我的主页中，我有3个部分，即section1，section2和section3具有相同的ID。我在顶部有一个下拉菜单，我使用了scroll-to插件滚动到点击的相应部分。

<li ><a href scroll-to="section1">History</a></li>

我的问题是，当我移动到另一条路线时，下拉菜单仍然位于顶部，我不知道如何从另一条路线滚动到主路线中的该元素。这就是我尝试过的。

<li ><a href="#/home/section4">Economic Weight</a></li>

在路线配置中我做了这个

      when('/home/:section', {
        templateUrl: '/euribron/js/app/templates/home.html',
        controller: 'HomeController'
      }).

在控制器中我做了这个

    if($routeParams.section) {      
        var element = document.getElementById($routeParams.section);
        smoothScroll(element);
    }

但是当我在同一条路线上并且它看起来并不优雅时，这不起作用。是否有更简单的方法以有效的方式实现这一目标。

Answer 1

您可以使用 $ anchorScroll 服务来管理自动滚动，而不是滚动到插件。请参阅此帖子的回答How to handle anchor hash linking in AngularJS。基本上，您需要将$ location.hash（）设置为可以从$ routeParams获取的部分ID，并调用$ anchorScroll（）函数来处理其余部分。为部分使用不同的ID。

Angular JS滚动到另一个页面中的元素

1 个答案: