jQueryで実装したページトップへスクロールするボタンにフォーカスを外す処理を加え、キーボードユーザーのユーザビリティを少し向上させてみました。
scroll-to-top.html
scroll-to-top.js
$('.js-scroll-to-top').on('click', function() { $('html,body').animate({ scrollTop: 0 }, 500); return false; });
↑機能的には十分ですが、ボタンクリック後にもフォーカスが残ってしまいます。
ページトップへスクロールボタンは大抵ページの下部にあったり、上部で非表示になるため、フォーカスが残ってしまうとキーボード操作のユーザーはタブキーを連打して現在地を移動しなくてはいけなくなるかもしれません。
scroll-to-top.js
$('.js-scroll-to-top').on('click', function() { $('html,body').animate({ scrollTop: 0 }, 500); this.blur(); //フォーカスを外す return false; });
this.blur();
を加えればボタンクリック後にページトップへスクロールボタンからフォーカスが外れ、次の操作に移行しやすくなります。