'How can I implement 'skip to content' links in Angular JS?

I'm trying to create a website that meets certain accessibility standards with tab clicks. I have a navigation menu on the left side of the screen and my users are requesting a "Skip to content" link so they don't have to constantly cycle through multiple links to get to where the content is.

However, I'm using AngularJS in my web app, and if I use the standard skip to content functionality (example: http://accessibility.oit.ncsu.edu/training/accessibility-handbook/skip-to-main-content.html), it won't work. I'm already using anchors (with #s) for the Angular code.

Is there any other way to implement this? I have a particular div tag that I would like the tab selection to go to. It should go to one of the elements inside the div.

htmlangularjsaccessibilitywai-aria


Solution 1:[1]

I've used angular-scroll to good effect before. It's lightweight (8.5kB), easy to use, and even takes care of scrolling animations for you. It also meets accessibility standards, as the Tab key can be used to navigate just like a normal anchor tag.

Implement like this:

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>

Working CodePen for reference: http://codepen.io/Pangolin-/pen/dPQRZa

Solution 2:[2]

I recently worked with $anchor$croll and have some tips for you.

In your template:

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

In your controller:

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

    });

The reason I added the $timeout call is because when I tested it without it, the $scrollTo didn't seem to work. It seems that the call to $location.hash(hash) takes some small time to process, hence the 100 ms wait.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 TylerH
Solution 2 TylerH

Related Questions