如何在 Angular JS 中实现“跳转到内容”链接？答案

【问题标题】：How can I implement 'skip to content' links in Angular JS?如何在 Angular JS 中实现“跳转到内容”链接？
【发布时间】：2022-02-19 03:59:47
【问题描述】：

我正在尝试创建一个通过标签点击满足某些可访问性标准的网站。我在屏幕左侧有一个导航菜单，我的用户正在请求“跳到内容”链接，这样他们就不必不断地循环浏览多个链接来到达内容所在的位置。

但是，我在我的网络应用程序中使用 AngularJS，如果我使用标准的跳转到内容功能（例如：http://accessibility.oit.ncsu.edu/training/accessibility-handbook/skip-to-main-content.html），它将无法工作。我已经在 Angular 代码中使用了锚点（带#s）。

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

【问题讨论】：

您可以添加按钮/链接，点击时只需关注您想要的任何元素 - 有什么问题？
问题是我的“内容”可以改变；因为我使用的是模板和ui-router。所以我需要它去内容中元素的标签索引
您可以使用特殊指令/id/类“标记”每个页面内容中的第一个元素。或者您可以选择页面上的所有可选项卡元素并跳过导航按钮。这不是很酷的方式，但至少是一些东西。

标签： html angularjs accessibility wai-aria

【解决方案1】：

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

这样实现：

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

【讨论】：

问题是我使用角度ui-router。所以当用户点击链接时，它不会刷新整个页面。并且它有#'s 将其他页面的内容加载到当前的主页中，带有一个模板。这在那里不起作用，因为我需要转到内容。
不是选择内容。我需要它来选择。如果用户使用 tab 键导航并按下回车键，他们需要转到内容并看到它被选中。
看来angular-scroll actually sets the focus 并不是键盘导航所需要的。

【解决方案2】：

我最近与$anchor$croll 合作，并为您提供了一些建议。

在您的模板中：

<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 毫秒。

【讨论】：