<section id="section_one">
    <h1>Accessible Smooth Scrolling</h1>
     <p>This is a popular jQuery script for scrolling to hash links within a page. It's adapted here to give keyboard focus to the target link, aiding accessibility.</p>
     <p>The browser's default behaviour could leave keyboard users tabbing through links that are out <of></of> view, so jQuery is used here to focus the target links using tabindex.</p>
      <li><a href="#section_two">Click here&hellip;</a></li>
  <section id="section_two">
    <h2>Press tab</h2>
    <p>You should be able to tab straight to the links in this section, bypassing the link  above.</p>
      <li><a href="#section_three">Yay! Do it again!</a></li>
      <li><a href="#section_one">Try it backwards.</a></li>
    <section id="section_three">
    <h2>Press tab again.</h2>
      <p>The original jQuery scrolling script can be found on css-tricks, and the simple accessibility adaption was inspired by Heydon Pickering's suggestion in his ebook "Apps For All".</p>
      <li><a href="#section_one">Back to the top.</a></li>
html {
background-color: #333;
color: #333;
font-family: sans-serif;
  a {
  padding: .25em;
  color: #fff; 
  text-decoration: none;
  border-radius: 5px;

section {
padding: 1rem;
margin: 1rem;
height: 24em;
padding-top: 7.5em;
border-radius: 5px;
background-color: #fb9f2c;
    h1, h2, ul {
    text-align: center;
    p {
    line-height: 1.5;
    max-width: 28em;
    margin: 0 auto;
    padding: .5em;
    :focus {
    outline: none;
    background-color: #333;
    border-radius: 3px;

ul {
margin: 0;
padding: 0;  
  li {
  display: inline-block;
  padding: .5em 1em;
View Compiled
$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
          scrollTop: target.offset().top
        }, 1000);
        return false;

jQuery('.os-slider1') .cycle({
fx: 'fade', // here change effect to blindX, blindY, blindZ etc 
speed: 'slow', 
timeout: 2000 

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js