【发布时间】：2021-01-01 01:15:25
【问题描述】：
正如标题所述，我需要一个与以下引导程序 sn-p 具有相同结果的函数。焦点部分的显示效果很好，但是在单击按钮时滚动到“主要内容”在 angularjs 中不起作用。
<body>
<a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
...
<div class="container" id="content" tabindex="-1">
<!-- The main page content -->
</div>
</body>
我了解理论上需要什么，但我是 angularjs 的新手，我不完全确定如何处理这个问题。
- “显示主要内容”按钮最初将设置为
position: absolute; left: -9999;以隐藏视图。 - 在键盘焦点上，按钮将被设置为
position: static，这将在页面上显示该按钮。 - 点击后，用户将被带到页面的“主要内容”部分，使用类似 $anchorScroll();我在这里找到https://docs.angularjs.org/api/ng/service/$anchorScroll
我想我在这里真正的问题是，将焦点上的两个功能结合起来，点击时执行此操作。
感谢任何帮助！
提前致谢。
【问题讨论】：
-
stackoverflow.com/a/62760090/2702894 展示了如何处理 CSS 方面的事情。您实际上不需要使用 angular，因为链接到相应锚点
<div id="main">的#main会自动滚动页面。我链接的示例允许多个跳过链接。单击示例并按 Tab，将出现跳过链接。如果您只需要一个，则只需删除第二个跳过链接。如果你这样做，你也不需要tabindex="-1"。 -
@GrahamRitchie 感谢您的回复。但是，主题标签会添加到 URL 的末尾，并且页面会在 angularjs 中重新加载。虽然 css 部分工作得很好，但这只是问题所在。
标签： javascript css angularjs twitter-bootstrap accessibility