Przejdź do treści

Question

Próbuję utworzyć witrynę internetową, która spełnia określone standardy dostępności za pomocą kliknięć tab. Problem polega na tym, że mam menu nawigacyjne po lewej stronie ekranu, a moi użytkownicy proszą o link typu "Przeskocz do treści", aby nie musieli cyklicznie przechodzić przez wiele linków, aby dotrzeć do miejsca, w którym znajduje się treść.

jednak używam AngularJS w mojej aplikacji internetowej, a jeśli używam standard przejdź do funkcjonalności zawartości (na przykład: http://accessibility.oit.ncsu.edu/training/accessibility-handbook/skip-to-main-content.html) nie będzie działać. Używam już kotwic (z #) do kodu kanciastego.

Czy istnieje inny sposób realizacji tego? Mam konkretny znacznik div, który chciałbym, aby wybór kart był możliwy. Powinien iść do jednego z elementów wewnątrz div.

Answer 1

Użyłem wcześniej dobrego efektu angular-scroll. Jest lekki (8,5kB), łatwy w użyciu, a nawet dba o przewijanie animacji. Spełnia również standardy dostępności, ponieważ klawisz Tab może być używany do nawigacji tak jak normalny znacznik zakotwiczenia.

Wdrożenie tak:

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> 

robocza CodePen dla odniesienia: http://codepen.io/Pangolin-/pen/dPQRZa

Szczęśliwych polowań!

Answer 2

Ostatnio współpracowałem z $angularScroll i mam dla ciebie kilka wskazówek.

W szablonie:

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

W kontrolerze:

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); 
     } 

    }); 

Powodem dodałem wywołanie $ timeout bo gdy testowałem go bez niego $ scrollTo nie wydaje pracować. Wygląda na to, że wywołanie $ location.hash (hash) zajmuje trochę czasu do przetworzenia, stąd oczekiwanie na 100 ms.

Mam nadzieję, że to działa.