Перейти к содержанию

Я пытаюсь создать веб-сайт, который соответствует определенным стандартам доступности с вкладками. Проблема в том, что у меня есть меню навигации в левой части экрана, и мои пользователи запрашивают ссылку типа "Пропустить к контенту", поэтому им не нужно постоянно перебирать несколько ссылок, чтобы добраться до того, где находится контент.

Тем не менее, я использую AngularJS в своем веб-приложении, и если я использую стандартный переход к функциональности контента (например: http://accessibility.oit.ncsu.edu/training/accessibility-handbook/skip-to-main-content.html) это не сработает. Я уже использую якоря (С#) для кода angular.

Есть ли другой способ реализовать это? У меня есть тег div, который я хотел бы выбрать для выбора вкладок. Он должен перейти к одному из элементов внутри div.

Ответы

Ответ 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>

Рабочий кодПен для справки: http://codepen.io/Pangolin-/pen/dPQRZa

Счастливая охота!

Ответ 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 мс.

Надеюсь, что это сработает.