Focus element that has been scrolled to

[fschroiff]

This is an accessibility measure. Scrolling without focussing can cause issues when tabbing through links on a page. You smooth-scroll to an anchor way down on the page, but the focus stays on the very first element. Then you tab to the next thing expecting it to take you to the next visible link, but it whips you back up to the very first element.

[LL782]

Very good call in my opinion but should this be a different script, i.e. not part of smooth-scroll but triggered at the same time?

[kswedberg]

👍 Accessibility measures like this are very important. At the very least, I should include this feature in the demos. Still, implementing a focus feature in the plugin itself could be problematic. Not all fragment identifiers ( #foo ) point to a focusable element, and it might not be what the plugin user would want to focus anyway.

One way to achieve this "out of the box" is to use the afterScroll callback:

$('a').smoothScroll({
  afterScroll: function(opts) {
    $(opts.scrollTarget).focus();
  }
});

If we were to add a focus option, maybe we could have it take either a Boolean—false would not change the focus; true would basically do what I did in afterScroll above—or a String, which would be used as a selector (the plugin would focus first element that matches the selector).

I'm inclined to leave the plugin as is and document the callback scenario, but I'm interested in hearing your thoughts. Also, let me know if I've missed anything. Thanks for bringing this to my attention.

[fschroiff]

Your proposed solution is sort of what I ended up doing, only I had to find an element that wanted to be focussed. Somehow my <div id="foo"> resisted focussing.

[kswedberg]

Updated docs.

[diegocanal]

A very interesting article about this matter https://css-tricks.com/smooth-scrolling-accessibility/

[kswedberg]

thanks @diegocanal ! I just published version 2.2.0 to include an autoFocus option. Its default is currently false, because otherwise it would be a "breaking change" and I'm trying to be good about "semver" versioning. I'm also going to publish version 3.0.0 soon, which will have autoFocus default to true.