跳到内容

Question

我正在尝试使用标签点击创建符合某些辅助功能标准的网站.问题是我在屏幕左侧有一个导航菜单,我的用户请求"跳到内容"类型链接,这样他们就不必经常通过多个链接循环到达内容的位置.

但是,我AngularJS在我的网络应用程序中使用,如果我使用标准跳过内容功能(例如:http://accessibility.oit.ncsu.edu/training/accessibility-handbook/skip-to-main-content. HTML)它将无法正常工作.我已经在使用锚点(用#'s)作为角度代码.

有没有其他方法来实现这个？我有一个特定的div标签,我希望选项卡选择.它应该转到div中的一个元素.

Answer 1

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

像这样实现：

JS

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

超文本标记语言

<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