title: Accessibility Keyboard only tab to z-index "Back to Top"
body: <p>How can you setup a tab index to a last link on the page with "Back To Top" Example page - <a href="https://www.shoeshow.com/terms-of-use" rel="nofollow noreferrer">https://www.shoeshow.com/terms-of-use</a> </p>
  
  <p>The following question explains about tab-index - <a href="https://stackoverflow.com/questions/4971912/tabindex-in-css">tabindex in CSS</a></p>
  
  <p>1) This does not seem like such a big issue because must keyboard users know about ctrl+home and ctrl+end.   Bugging me to figure out how to tab to a z-index hyperlink.</p>
  
  <p>If I find the answer I will edit this post, but hoping some others have done this to help me figure this out faster.</p>
  
  <p>EDIT --- (WARNING) Do not run in full page by running this code in full page you will tab through a lot of stackoverflow content, but this does work.  It is the placement of you "Back to Top".</p>
  
  <p>The answer for this question had to do with the html layout for the "Back to Top" It has to be at the end of the page.  </p>
  
  <p>The code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> var offset = 220;
   var duration = 500;
   jQuery(window).scroll(function() {
     if (jQuery(this).scrollTop() &gt; offset) {
       jQuery('.back-to-top').fadeIn(duration);
     } else {
       jQuery('.back-to-top').fadeOut(duration);
     }
   });
  
   jQuery('.back-to-top').click(function(event) {
     event.preventDefault();
     jQuery('html, body').animate({
       scrollTop: 0
     }, duration);
     return false;
   });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.back-to-top {
    position: fixed;
    bottom: 2em;
    right: 0;
    z-index: 999;
    text-decoration: none;
    color: #000000;
    background-color: rgba(235, 235, 235, 0.80);
    font-size: 1.4em;
    padding: 1em;
    display: none;
  }
  .back-to-top:hover {
    background-color: rgba(135, 135, 135, 0.50);
  }
  .back-to-nav {
    position: fixed;
    bottom: 2em;
    left: 0;
    z-index: 99999999;
    text-decoration: none;
    color: #000000;
    background-color: rgba(235, 235, 235, 0.80);
    font-size: 12px;
    padding: 1em;
    display: none;
  }
  .back-to-nav:hover {
    background-color: rgba(135, 135, 135, 0.50);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec molestie nibh tempor enim congue blandit. Ut at consequat dui. In ut egestas tellus. Nullam dictum orci quis nisl venenatis, eu malesuada est bibendum. Sed nulla nulla, laoreet a neque at,
  dictum placerat justo. Nam a condimentum ligula. Mauris id cursus ante, eu euismod ex. Vestibulum elementum quis enim nec maximus. Nullam et condimentum magna, sit amet ultricies ligula. Pellentesque posuere, nibh vitae finibus condimentum, purus est
  gravida turpis, non fringilla tellus enim quis urna. Praesent vel magna eu massa bibendum lobortis a eget ipsum. Aliquam eleifend, nunc non lacinia commodo, dolor augue posuere eros, accumsan varius mauris ligula et nisi. Phasellus rutrum imperdiet mauris,
  id lacinia nunc tempus placerat. Morbi ac consectetur leo. Phasellus vitae congue nisl. Donec consectetur sagittis lacus vel mollis. Nullam malesuada eleifend cursus. Curabitur ultricies orci sit amet elit lobortis, sed hendrerit risus iaculis. Pellentesque
  fringilla magna massa. Donec eu volutpat nunc. Cras porta in nulla in venenatis. Nam nibh tellus, eleifend et augue ullamcorper, euismod faucibus mi. Vivamus consectetur ipsum vel neque mollis, id fermentum nisl pulvinar. Donec cursus gravida dolor, cursus
  luctus mauris placerat in. Suspendisse non tellus in nulla vestibulum varius et eu urna. Fusce efficitur tellus libero, a gravida sem luctus ut. Suspendisse volutpat justo ac eleifend faucibus. Nulla eu dapibus mi. Nunc iaculis interdum dui, id ultricies
  odio tristique id. Sed mattis ac est eu placerat. Nunc vel euismod mauris. Proin eget ligula justo. Sed molestie in lacus nec pulvinar. Duis rutrum lobortis mi. Phasellus tempus mollis luctus. In scelerisque massa vitae fermentum dapibus. Suspendisse
  tristique cursus gravida. Praesent tincidunt augue massa, suscipit gravida lectus luctus non. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse hendrerit massa id mi aliquam elementum. Donec nec metus
  mauris. Pellentesque cursus dictum ex eget pharetra. Duis sit amet neque consequat, varius tortor quis, rhoncus massa. Maecenas tincidunt volutpat mi, sed auctor purus facilisis ut. In consequat cursus justo, id vehicula diam ultrices vitae. Vestibulum
  tellus nisl, pharetra ac fringilla sit amet, pulvinar vitae libero. Nulla viverra lobortis porttitor. Nulla tempus volutpat ante vestibulum venenatis. Pellentesque nec ipsum vel sapien consectetur euismod. Suspendisse faucibus a justo et consequat. Donec
  neque purus, maximus a mollis nec, rutrum vitae libero. Proin convallis magna id convallis auctor. Morbi blandit magna nisl, a feugiat elit imperdiet id. Maecenas eleifend ac est at fermentum. Nam interdum porttitor urna sed tempus. Duis ultrices elementum
  posuere. Vestibulum id ex sodales, ultrices augue venenatis, pharetra turpis. Donec venenatis massa at tristique tristique. Phasellus quis tristique sem. Pellentesque vitae est vel metus finibus ultrices. Fusce arcu mauris, consequat ut accumsan nec,
  vestibulum at libero. Aenean cursus ex eu quam laoreet elementum. Integer eu hendrerit urna. Sed sit amet risus ex. Nullam congue luctus consequat. Donec non arcu ac velit vehicula ultrices eu a massa. Sed risus turpis, interdum quis quam eget, molestie
  accumsan tellus. Suspendisse sed sem nisl. Maecenas imperdiet, neque in tristique interdum, ipsum est consectetur enim, a euismod lectus velit at risus. Phasellus eu pretium metus. Sed id vestibulum nisl. Duis quis nibh a nunc egestas bibendum. Sed consectetur
  orci nec magna dictum, sit amet pretium sapien laoreet. Proin convallis urna et erat elementum volutpat. Cras efficitur tempor tortor, eu efficitur lectus ullamcorper sed. Pellentesque ex dui, lobortis eget aliquet tempor, facilisis nec ante. Praesent
  vestibulum nulla et lacinia maximus. Duis sit amet gravida elit, semper gravida risus. Nulla consectetur a mauris ut malesuada. Nam non lacus in orci elementum mollis sed non enim. Curabitur in justo diam. In lobortis, ex a congue ullamcorper, lectus
  massa porta ex, non porttitor orci sem nec augue. Morbi malesuada urna ut massa pretium, nec imperdiet neque euismod. Morbi dapibus fringilla turpis, ut mattis magna. Nam condimentum semper facilisis. Morbi bibendum mi tellus, ut vestibulum nunc venenatis
  sed. Nulla volutpat lorem non auctor vehicula. Ut at diam metus. Nam tellus mi, ullamcorper pretium pellentesque a, semper ac augue. Mauris efficitur vel ligula ac vulputate. Morbi luctus, ex at finibus laoreet, felis diam suscipit lorem, ac vestibulum
  mauris erat eu nisi. Praesent malesuada semper imperdiet. Donec orci dui, suscipit quis dignissim id, eleifend at ex. Pellentesque ut nulla ac justo euismod cursus. Duis dignissim nisl ex, at accumsan mauris mattis sit amet. In elementum nec ligula non
  ultrices. Duis in diam eleifend eros maximus blandit. Sed tortor dui, elementum ac blandit vel, accumsan vitae lectus. Quisque et ligula sapien. Praesent sed justo metus. Vestibulum tincidunt, augue nec rhoncus aliquet, est nulla consequat enim, vel aliquam
  nulla arcu at tortor. Vivamus pellentesque, tortor a dapibus dapibus, felis nulla egestas tellus, at convallis erat tortor sit amet metus. Integer lacinia mauris in fringilla malesuada. Suspendisse vel sollicitudin erat, vehicula egestas ligula. Nam sollicitudin
  pharetra velit, id bibendum augue mattis eget. Mauris eu lectus leo. Proin placerat mollis egestas. Donec nulla lacus, pulvinar a metus ac, ornare fringilla felis. Proin non fringilla ipsum. In placerat arcu nulla, finibus maximus est ornare id. Suspendisse
  interdum lobortis congue. Nulla a nibh magna. Donec ullamcorper non tellus non interdum. Suspendisse vestibulum non diam ut convallis. Sed augue orci, porta vel lectus non, malesuada mollis elit. Praesent a dapibus est, quis convallis libero. Fusce iaculis,
  diam nec maximus fermentum, felis ipsum mollis nibh, ut mollis orci quam non urna. Vestibulum a ex eget nisi venenatis mollis et quis orci. Proin vitae ipsum at justo lacinia accumsan. Vestibulum facilisis accumsan turpis, id tincidunt nunc molestie vitae.
  Sed convallis nisi sed tortor placerat consequat. Donec ultrices posuere orci, et porttitor nibh molestie eget. Maecenas molestie hendrerit finibus. Donec accumsan risus purus, sit amet sagittis lectus congue non. Nunc risus nulla, lobortis in ipsum id,
  mollis tincidunt odio. Morbi ornare lectus sed magna mollis suscipit quis at quam. Donec venenatis, enim vitae ultricies fringilla, nisi massa fringilla nisl, quis dignissim mi nibh auctor elit. Maecenas vitae quam non est pellentesque elementum vel id
  est. Phasellus porttitor ipsum vel placerat mollis. Aenean a faucibus erat. Mauris fringilla ipsum ac quam hendrerit commodo. Donec dapibus neque vitae dolor maximus, et elementum leo fringilla. Morbi eu ante eu turpis egestas posuere quis quis nunc.
  Sed consectetur tortor posuere scelerisque accumsan. Aliquam accumsan urna eu fringilla tincidunt. Proin et mattis purus. In porta justo ut vestibulum luctus. Nulla lorem tellus, aliquet vitae eleifend a, ornare eu massa. Nam sit amet risus vitae dolor
  sodales pharetra. Praesent iaculis, purus sit amet mollis scelerisque, libero ligula euismod urna, quis interdum mi eros non enim. Morbi bibendum tincidunt sapien, non bibendum lectus accumsan non. Maecenas nisl eros, malesuada eget sapien dapibus, efficitur
  eleifend sem. Aenean suscipit sollicitudin sem eget accumsan. Pellentesque sodales, eros eu iaculis semper, justo tellus tincidunt odio, a sollicitudin sem leo vehicula nisi. Nunc eget orci nec mauris pharetra euismod. Donec scelerisque, purus bibendum
  bibendum pretium, sem risus euismod elit, et porta sem nisl et lorem. Phasellus vel dapibus ipsum, sed tincidunt sem. Cras lobortis condimentum nulla id tincidunt. Pellentesque malesuada pellentesque eros. Sed nibh dui, volutpat quis congue ac, finibus
  vel elit. Donec a nisl nisi. Nam dignissim tellus at arcu volutpat, vel dignissim lectus venenatis. Nam efficitur dictum interdum. Nulla pulvinar ligula et odio egestas, id accumsan ante facilisis. Praesent nulla orci, consectetur vel fringilla vel, efficitur
  tincidunt felis. Morbi eget risus id turpis commodo dignissim. Aliquam erat volutpat. Nulla gravida odio ullamcorper lorem mollis commodo. Mauris tincidunt pulvinar ipsum. Nam orci lacus, vestibulum et mi in, iaculis vehicula augue. Pellentesque at metus
  rhoncus, aliquet libero et, congue lacus. Donec mi ex, vulputate vitae ultricies vitae, ullamcorper at diam. In luctus dui id dui fringilla facilisis. Proin sit amet nibh pharetra, posuere nulla eget, gravida risus. Pellentesque pretium porttitor nisl,
  sed mattis mi dictum at. Sed nec nunc vitae nisi mattis dignissim. Vivamus suscipit tincidunt ligula, in cursus tellus pretium quis. In hac habitasse platea dictumst. Quisque in eros ut lorem iaculis lobortis a ac nulla. Suspendisse placerat tincidunt
  ligula, ut vulputate quam varius et. Pellentesque bibendum risus nunc, ultrices vestibulum dui facilisis sodales. Sed gravida malesuada enim sed blandit. Nunc a ante blandit, pellentesque tellus quis, cursus mauris. Praesent in ligula vitae mi pharetra
  lobortis ac nec dui. Integer non arcu nunc. Etiam cursus urna et nisi pellentesque, quis rhoncus sem semper. Quisque viverra efficitur sem, eu molestie dolor tincidunt vitae. Mauris diam lorem, sodales sit amet libero a, eleifend venenatis sem. Nullam
  neque felis, tincidunt nec massa ac, facilisis vehicula urna. Integer et eleifend magna. Etiam elementum interdum urna non tristique. Fusce at tellus ac magna interdum consequat nec vel velit. Suspendisse aliquet sagittis enim vel sodales. Quisque interdum
  luctus quam, ut lobortis dui porttitor non. Nullam in sodales augue, ac cursus libero. Curabitur eget vulputate felis, ac dignissim erat. Nullam ac nibh mauris. Donec convallis aliquam mauris, eu placerat massa suscipit molestie. Cras accumsan, mauris
  ac egestas lacinia, tellus arcu sagittis justo, a mollis dui purus vel ante. Fusce sit amet lorem suscipit, pharetra sem a, accumsan nibh. Aliquam facilisis elit dui, blandit varius justo eleifend non. Donec commodo quis orci consectetur sollicitudin.
  Cras porttitor ipsum magna, et ornare sapien viverra in. Morbi vel porta eros, non maximus urna. Vivamus in fringilla diam. Ut imperdiet, turpis ac vehicula hendrerit, justo arcu egestas nunc, euismod ornare arcu nunc non magna. Vestibulum lobortis nisi
  nec lorem lobortis porta. Fusce fringilla, neque vitae fringilla condimentum, mauris ex volutpat arcu, nec accumsan nunc nisi quis risus. Nam luctus blandit euismod. Quisque finibus at lorem et venenatis. Suspendisse eleifend interdum nisi, a pharetra
  lacus ultricies ut. Quisque sit amet eros fermentum, malesuada metus non, semper libero. Suspendisse potenti. Integer convallis porttitor dignissim. Nullam volutpat nulla tortor, id tristique arcu porttitor porttitor. Aenean pellentesque arcu a erat tincidunt,
  et maximus sem vulputate. Proin erat urna, venenatis id justo sed, vestibulum aliquet nisi. Donec sagittis nunc nisl. Proin eget tellus sollicitudin, mollis felis non, tristique justo. Etiam quis fermentum massa. Phasellus tempor velit sit amet augue
  condimentum varius. Nam posuere efficitur risus. Aenean sit amet justo posuere, vestibulum arcu in, porttitor eros. Donec vel leo neque. Nulla nec velit pulvinar, egestas nisi et, ullamcorper augue. Sed ac porta eros. Proin ut nisl odio. In ut nulla nec
  lacus commodo interdum at non libero. Etiam condimentum varius porta. Sed sed eros vitae enim scelerisque aliquet. Maecenas congue commodo nibh, nec pharetra lorem commodo at. Vivamus nec ultricies purus. Morbi vel dui consectetur, auctor dolor et, tincidunt
  orci. Etiam id elementum nibh. Nullam non nunc ultricies, blandit nisi a, porttitor eros. Fusce pulvinar sagittis interdum. In hac habitasse platea dictumst. Proin molestie tortor quis lacus eleifend dignissim. Pellentesque habitant morbi tristique senectus
  et netus et malesuada fames ac turpis egestas. Aliquam sit amet arcu molestie, aliquet diam et, vestibulum nunc.
  &lt;a href="#" class="back-to-top" tabindex="0"&gt;Back to Top&lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Before the </p>
  
  <pre><code>&lt;a href="#" class="back-to-top" tabindex="0"&gt;Back to Top&lt;/a&gt;
  </code></pre>
  
  <p>Was in the heading and the CSS positioned it, but when I moved it to the footer after the final Trustwave link it would tab to the "Back to Top"  Thanks stackoverflow community.  AWESOME...</p>