使用 AngularJS 指令更改 div 内 div 的滚动位置答案

【问题标题】：Changing the scroll position of a div inside a div using AngularJS directives使用 AngularJS 指令更改 div 内 div 的滚动位置
【发布时间】：2015-12-04 15:13:11
【问题描述】：

我目前正在开发一个 Angular 应用程序，该应用程序具有一个固定高度的嵌套 div，其中填充了文本。我想使用外部 div 上的目录来导航内部嵌套 div 中的文本。文本和目录都使用ng-repeat 动态加载。这是我的html...

 <div class="text-nav-main">
        <ul class="nav-ul">
            <li ng-repeat="item in text.obj" >
                <span scroll-on-click href="#{{item.id}}" >{{item.title}}</span>
                <ul class="nav-ul">
                    <li ng-repeat="art in item.article">
                        <span scroll-on-click href="#{{art.id}}" >{{art.artNum}}</span>
                        <ul class="nav-ul">
                            <li  ng-repeat="sub in art.subArt">
                                <span scroll-on-click href="#{{sub.id}}" >{{sub.subArtNum}}</span>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <div class="text-main-window">
            <div ng-repeat="item in text.obj">
                <h3 id="{{item.id}}">{{item.title}}</h3>
                <br/>
                <div ng-repeat="art in item.article">
                    <h4 id="{{art.id}}">{{art.artNum}}</h4>
                    <br/>
                    <div ng-repeat="subArt in art.subArt">
                        <h5 id="{{subArt.id}}" >{{subArt.subArtNum}}</h5>
                        <div ng-repeat="para in subArt.paragraph">
                            <p>{{para.text}}</p>
                        </div>
                        <a ui-sref="rulebook.detail({detail:rules.ruleNumber})" 
                           class="rule-style" 
                           ng-repeat="rules in subArt.rule">
                            {{rules.ruleNumber}} {{rules.ruleName}}<br/>
                        </a>
                        <br/>
                    </div>
                </div>
            </div>
    </div>

这是我一直在尝试使用的指令ScrollTo function in AngularJS

    (function(){
'use strict';

    angular.module('ganeshaApp')
        .directive('scrollOnClick', function() {
          return {
            restrict: 'A',
            link: function(scope, element, attrs) {
              var idToScroll = attrs.href;
              element.on('click', function() {
                var $target;
                if (idToScroll) {
                  $target = $(idToScroll);
                } else {
                  $target = element;
                }
                $(".text-main-window").animate({scrollTop: $target.offset().top }, "slow");
              });
            }
              }
    });
    })();

目前，这些链接将我带到了嵌套 div 中的所有地方。当我两次单击同一个链接时，它会将我带到两个不同的点。如果我在单击事件上执行 $target.offset().top 的 console.log，它会给出每个元素的正确位置，但是当我打开动画功能时，一切都变得混乱。如果我缺少一个简单的解决方案，我深表歉意。我还有很多东西要学，我就是想不通这一点。提前感谢您的回复。

【问题讨论】：

标签： javascript angularjs scrolltop angular-directive tableofcontents

【解决方案1】：

刚刚找到答案here。虽然它没有被标记为已回答的问题，但它应该是。非常感谢AaronS。

只需要从要滚动到的元素的顶部位置减去嵌套div的顶部位置，然后再加回div的scrollTop位置。我在最终值上添加了 20 像素，只是为了给文本留出一点边距。

(function(){
'use strict';

angular.module('ganeshaApp')
    .directive('scrollOnClick', function() {
      return {
        restrict: 'A',
        link: function(scope, element, attrs) {
          var idToScroll = attrs.href;
          element.on('click', function() {
            var $target;
            if (idToScroll) {
              $target = $(idToScroll);
            } else {
              $target = element;
            }

            $(".text-main-window").animate({
                scrollTop: $target.position().top - 
                $(".text-main-window").position().top + 
                $(".text-main-window").scrollTop() - 20}, "slow");
          });
        }
      }
});
})();

希望这对其他人有帮助。

【讨论】：