share facebook facebook twitter menu hatena pocket slack

2019.05.07 TUE

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

工藤 響己

WRITTEN BY 工藤 響己

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

元記事はこちら

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

cloudpack

cloudpackは、Amazon EC2やAmazon S3をはじめとするAWSの各種プロダクトを利用する際の、導入・設計から運用保守を含んだフルマネージドのサービスを提供し、バックアップや24時間365日の監視/障害対応、技術的な問い合わせに対するサポートなどを行っております。
AWS上のインフラ構築およびAWSを活用したシステム開発など、案件のご相談はcloudpack.jpよりご連絡ください。