Angularjs 使用$location和$anchorScroll将表格行滚动到视图中

我试图使用$anchorScroll向下滚动页面，以确保显示一行表。我已经阅读了大部分关于$anchorScroll的文章和文档。据我所知，我在正确使用它。我已经用Firebug完成了代码，并且我使用的元素id似乎是正确的

当我执行应该更改滚动位置的函数时，它确实会更改滚动位置，但它只是向上滚动，一直滚动到顶部。我想要滚动到的“target”元素位于我执行函数的页面下方

没有错误消息，它只是不能满足我的需要

以下是我使用的简单函数：

$scope.scrollTo = function (elementId) {
        console.log("element[" + angular.element(elementId) + "]");
        $location.hash(elementId);
        $timeout(function() {
            $anchorScroll();
        });
    };

我还尝试更改对它的引用，这样它就不会以表行为目标，而是以包围表的accordio div为目标，但这没有什么区别。它仍然只是跳转到页面的顶部

请注意，在调用“scrollTo”之前，我首先确保打开了与表对应的文件。在任何情况下，即使手动打开，它仍然无法正确滚动

更新：

下面是我试图滚动到的HTML的一部分：

                <div ng-controller="WorkflowDefsCtrl">
                <pane accordion-group heading="Workflows" is-open="accordionActiveFlags.workflowDefs" id="workflowDefs">
                    <label for="workflowDefsTable">Workflow Definitions</label>
                    <table id="workflowDefsTable" ng-table class="table">
                        <tr ng-repeat="workflowDef in sunlightConfig.workflowDefinitions | orderBy: workflowDef.order" id="workflowDef{{workflowDef.id}}">
                            <td data-title="'ID'">{{workflowDef.id}}</td>
                            <td data-title="'Name'">{{workflowDef.name}}</td>
                            <td data-title="'Label'">{{workflowDef.label}}</td>
                            <td data-title="'Order'" class="text-right">{{workflowDef.order}}</td>
                            <td data-title="'Render?'">{{workflowDef.render}}</td>
                            <td data-title="'Query Fragment'">{{workflowDef.queryFragment}}</td>
                            <td data-title="'Query Order'" class="text-right">{{workflowDef.queryOrder}}</td>
                        </tr>
                    </table>
                </pane>
            </div>

---

我设法弄明白了。我正确地假设必须在

$timeout

块中执行

$anchorScroll

，但这还不够。对

$location.hash（）

的调用也必须位于

$timeout块中。一旦我将我的
滚动到
功能更改为以下内容：

    scrollTo:   function (elementId) {
        $timeout(function() {
            $location.hash(elementId);
            $anchorScroll();
        });
    },

然后它开始一致地工作。
当状态更改时&
$location.hash（）
不是空的，然后滚动到导航页面中所需的hash id元素$超时将确保在页面正确加载后滚动到哈希id块

$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
    if ($location.hash()) {
        $timeout(function() {
            var hashId = $location.hash();
            $anchorScroll();
            document.getElementById(hashId).focus();
        });
    }
 });

你能分享一些你的HTML吗？我犯了使用的错误，但它期望因此检查您是否有一个id设置为元素id中的内容的锚定标记。我没有滚动到锚定标记（$anchorScroll似乎不在乎），但我使用的是“id”，正如您从更新中看到的。源代码看起来确实是专门针对锚定标记的。它被命名为“锚”，源代码寻找类型为“a”的标签好吧，好吧，我想你是对的。那么你如何解释这个插件呢？$anchorScroll（）的全部用途不就是你不必使用的.focus（）？如果你在$timeout上花100毫秒这样的小时间，对我来说效果会很好。根据文档，我也不需要$location.hash（），您只需将元素id作为$anchorScroll（）的参数输入即可。所以：$timeout（function（）{$anchorScroll（“someid”）；}，100）；
$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
    if ($location.hash()) {
        $timeout(function() {
            var hashId = $location.hash();
            $anchorScroll();
            document.getElementById(hashId).focus();
        });
    }
 });