Question

我尝试使用标签点击创建符合特定辅助功能标准的网站。问题是我在屏幕左侧有一个导航菜单，我的用户请求＆＃34;跳到内容＆＃34;键入链接，这样他们就不必经常通过多个链接循环到达内容的位置。

但是，我在我的网络应用中使用AngularJS，如果我使用标准跳转内容功能（例如：http://accessibility.oit.ncsu.edu/training/accessibility-handbook/skip-to-main-content.html），它就无法工作。我已经在使用锚点（用＃＆＃39; s）作为角度代码。

还有其他方法可以实现吗？我有一个特定的div标签，我希望选项卡可以选择。它应该转到div中的一个元素。

Answer 1

我之前使用angular-scroll效果很好。它重量轻（8.5kB），易于使用，甚至可以为您处理滚动动画。它还符合可访问性标准，因为Tab键可以像普通的锚标签一样导航。

像这样实施：

<强> JS

angular
.module('app', ['duScroll'])
.controller('MainCtrl', function ($scope, $document) {
  //Controller logic here
}

<强> HTML

<a href="#nav-one" du-smooth-scroll duration="1500">Navigation Link</a>

<!-- further down the page -->

<div id="nav-one">
  Content goes here.
</div>

使用CodePen作为参考：http://codepen.io/Pangolin-/pen/dPQRZa

快乐狩猎！

Answer 2

我最近与$angularScroll合作并为您提供了一些提示。

在你的模板中：

<a href="javascript:void(0)" ng-click="scrollTo('hello-scroll')">Go</a>
...
<div id="hello-scroll">Hello Scroll!</div>

在您的控制器中：

angular
   .module('someModule', [])
   .controller('scrollCtrl', function($scope, $timeout, $timeout, $anchorScroll) {

        /**
         * @name    scrollTo
         * @desc    Anchor scrolling within page using $anchorScroll
         * @param   {String}   hash - Element ID.
         * @return  void
         */
        $scope.scrollTo = function(hash) {
           $location.hash(hash);
           $timeout(function() {
              $anchorScroll();
            }, 100);
        }

    });

我添加$ timeout调用的原因是因为当我在没有它的情况下测试它时，$ scrollTo似乎不起作用。似乎对$ location.hash（hash）的调用需要一些小的时间来处理，因此等待100毫秒。

希望它有效。

跳到内容

2 个答案: