Edited at

「ページトップへスクロール」ボタンのフォーカスを外してユーザビリティを上げる

jQueryで実装したページトップへスクロールするボタンにフォーカスを外す処理を加え、キーボードユーザーのユーザビリティを少し向上させてみました。


scroll-to-top.html

<button class="js-scroll-to-top" type="button">ページトップへ</button>



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();を加えればボタンクリック後にページトップへスクロールボタンからフォーカスが外れ、次の操作に移行しやすくなります。