跳到內容

我試圖創建一個網站，滿足特定的輔助功能標準與選項卡點擊。問題是我在屏幕左側有一個導航菜單，我的用戶請求一個「跳到內容」類型的鏈接，這樣他們就不需要不斷地循環訪問多個鏈接來到達內容的位置。跳到內容

但是，我在我的網絡應用程序中使用了AngularJS，如果我使用標準跳轉到內容功能（例如：http://accessibility.oit.ncsu.edu/training/accessibility-handbook/skip-to-main-content.html），它將不起作用。我已經在使用錨點（用＃）作爲角碼。

有沒有其他的方法來實現這個？我有一個特殊的div標籤，我希望標籤選擇要去。它應該轉到div中的其中一個元素。

來源

2015-04-18 KVISH

你可以添加按鈕/鏈接，並點擊只需集中任何元素你想 - 什麼是問題？ –

問題是我的「內容」可以改變;因爲我使用的是模板和'ui-router'。因此，我需要它轉到內容中元素的Tab索引 – KVISH

您可以使用特殊指令/ id/class在每個頁面上的內容中標記第一個元素。或者您可以選擇頁面上的所有Tabable元素並跳過導航按鈕。那不是那麼酷的方式，但至少有一些東西。 –

我以前用angular-scroll效果很好。它是輕量級的（8.5kB），易於使用，甚至照顧您的滾動動畫。它也符合可訪問性標準，因爲Tab鍵可以像普通的錨標籤一樣用於導航。

實現這樣的：

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>

工作CodePen供參考：http://codepen.io/Pangolin-/pen/dPQRZa

快樂狩獵！

來源

2015-04-18 01:58:01 Pangolin

問題是我使用角度'ui-router'。所以當用戶點擊鏈接時，它不刷新整個頁面。它具有從其他頁面將內容加載到當前主頁面中的模板。這不會在那裏工作，因爲我需要去內容。 – KVISH

這不是選擇內容。我需要它來選擇。如果用戶使用Tab鍵導航並按下回車鍵，他們需要轉到內容並看到它被選中。 – KVISH

似乎沒有[angular-scroll實際上設置了'focus']（https://github.com/oblador/angular-scroll/blob/master/angular-scroll.js），這是鍵盤所需要的導航。 – steveax

我最近與$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); 
     } 

    });

我增加了$超時呼叫的原因，因爲當我測試了它沒有它，$ scrollTo似乎是沒上班。看起來對$ location.hash（hash）的調用需要一些時間來處理，因此需要等待100 ms。

希望它有效。

來源

2015-04-18 03:40:33

回答

相關問題