A few people suggested search plugins and other stuff, but this was actually solved in standard HTML5 and JavaScript many years ago with tabindex.
Try this simple tabindex and scrolling demonstration. Open it in a new window, narrow your browser window if you want the effect to be more dramatic, then start tabbing through the window. It should scroll to the top on the 3rd and 5th paragraph.
Here’s the source code for it…
<!DOCTYPE html>
<head>
<script>
var lastel = 0;
function rollup(el) {
if (el.tabIndex !== lastel) {
el.scrollIntoView();
lastel = el.tabIndex;
}
}
</script>
</head>
The script stops the active element from triggering the scroll if the focus event fires more than once in a row on the same element. Otherwise, it uses the element.scrollIntoView() browser method to scroll the element up to the top of the screen.
This is sort of a complex use case and a friend already sent me code where he broke it by giving every paragraph the same tabindex value. I have a simpler use case below the following demo code.
For this current use case, here’s the body content. I add tabindex="n" (where n is an integer that represents the element’s place in the tabbing order, starting with one) to the paragraph element attributes. On the elements I want to cause the content to scroll up, I add onfocus=rollup(this) which triggers the rollup function above.
<body style="font-family: helvetica, Arial, Helvetica, sans-serif; font-size: 30px;">
<p tabindex="1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam venenatis feugiat lobortis. Fusce
tristique ligula a nulla placerat malesuada. Curabitur lobortis tempor ligula in viverra. Phasellus accumsan nunc id
metus placerat bibendum. Curabitur vel gravida sem. Aliquam ac diam convallis, hendrerit tortor et, convallis diam.
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<p tabindex="2">Maecenas ligula ipsum, dictum id risus vel, vestibulum vestibulum velit. Morbi laoreet lobortis lorem
id elementum. Ut eu efficitur velit, tempor dignissim leo. Fusce sed interdum diam. Suspendisse dictum magna vel
ante rutrum molestie. Integer imperdiet gravida nisi nec varius. Curabitur facilisis tristique porttitor. Morbi
viverra mauris semper pulvinar euismod. Nullam non vestibulum neque. Fusce sollicitudin sagittis mi consectetur
tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam turpis ex,
convallis posuere venenatis et, gravida vel purus.
</p>
<p tabindex="3" onfocus=rollup(this)>Praesent vel ultricies est, quis auctor metus. Aliquam sollicitudin nunc eget
justo suscipit, a vulputate neque tempor. Aliquam lectus elit, molestie non ullamcorper a, ultricies at felis. Fusce
nec justo feugiat enim hendrerit elementum sed vitae augue. Phasellus sem arcu, porta imperdiet metus sed, accumsan
fringilla lorem. Fusce et pellentesque eros. Maecenas eget magna in sapien hendrerit condimentum quis ac erat.
Mauris sed ante hendrerit dolor tempor congue. Nam ligula odio, tincidunt ac malesuada a, fermentum et nunc. Aenean
ultricies pellentesque velit, quis tristique metus luctus quis.
</p>
<p tabindex="4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam venenatis feugiat lobortis. Fusce
tristique ligula a nulla placerat malesuada. Curabitur lobortis tempor ligula in viverra. Phasellus accumsan nunc id
metus placerat bibendum. Curabitur vel gravida sem. Aliquam ac diam convallis, hendrerit tortor et, convallis diam.
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<p tabindex="5" onfocus=rollup(this)>Maecenas ligula ipsum, dictum id risus vel, vestibulum vestibulum velit. Morbi
laoreet lobortis lorem
id elementum. Ut eu efficitur velit, tempor dignissim leo. Fusce sed interdum diam. Suspendisse dictum magna vel
ante rutrum molestie. Integer imperdiet gravida nisi nec varius. Curabitur facilisis tristique porttitor. Morbi
viverra mauris semper pulvinar euismod. Nullam non vestibulum neque. Fusce sollicitudin sagittis mi consectetur
tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam turpis ex,
convallis posuere venenatis et, gravida vel purus.
</p>
<p tabindex="6">Praesent vel ultricies est, quis auctor metus. Aliquam sollicitudin nunc eget justo suscipit, a
vulputate neque tempor. Aliquam lectus elit, molestie non ullamcorper a, ultricies at felis. Fusce nec justo feugiat
enim hendrerit elementum sed vitae augue. Phasellus sem arcu, porta imperdiet metus sed, accumsan fringilla lorem.
Fusce et pellentesque eros. Maecenas eget magna in sapien hendrerit condimentum quis ac erat. Mauris sed ante
hendrerit dolor tempor congue. Nam ligula odio, tincidunt ac malesuada a, fermentum et nunc. Aenean ultricies
pellentesque velit, quis tristique metus luctus quis.
</p>
<p tabindex="7">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam venenatis feugiat lobortis. Fusce
tristique ligula a nulla placerat malesuada. Curabitur lobortis tempor ligula in viverra. Phasellus accumsan nunc id
metus placerat bibendum. Curabitur vel gravida sem. Aliquam ac diam convallis, hendrerit tortor et, convallis diam.
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<p tabindex="8">Maecenas ligula ipsum, dictum id risus vel, vestibulum vestibulum velit. Morbi laoreet lobortis lorem
id elementum. Ut eu efficitur velit, tempor dignissim leo. Fusce sed interdum diam. Suspendisse dictum magna vel
ante rutrum molestie. Integer imperdiet gravida nisi nec varius. Curabitur facilisis tristique porttitor. Morbi
viverra mauris semper pulvinar euismod. Nullam non vestibulum neque. Fusce sollicitudin sagittis mi consectetur
tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam turpis ex,
convallis posuere venenatis et, gravida vel purus.
</p>
<p tabindex="9">Praesent vel ultricies est, quis auctor metus. Aliquam sollicitudin nunc eget justo suscipit, a
vulputate neque tempor. Aliquam lectus elit, molestie non ullamcorper a, ultricies at felis. Fusce nec justo feugiat
enim hendrerit elementum sed vitae augue. Phasellus sem arcu, porta imperdiet metus sed, accumsan fringilla lorem.
Fusce et pellentesque eros. Maecenas eget magna in sapien hendrerit condimentum quis ac erat. Mauris sed ante
hendrerit dolor tempor congue. Nam ligula odio, tincidunt ac malesuada a, fermentum et nunc. Aenean ultricies
pellentesque velit, quis tristique metus luctus quis.
</p>
</body>
This is what you’ll find in the tabindex and scrolling demonstration page.
Even simpler tabbing…
If you don’t feel a need to necessarily control the order of the tabbing, you can leave out the entire block of javascript and change the onfocus event to call the element.scrollIntoView() method directly. Each item needs a tabindex property to get them into the tabbing order, but they can all be set to 1 if you just want to tab through the elements sequentially. It would look like this…
<p tabindex="1" onfocus="this.scrollIntoView()">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam venenatis feugiat lobortis. Fusce tristique ligula a nulla placerat malesuada. Curabitur lobortis tempor ligula in viverra. Phasellus accumsan nunc id metus placerat bibendum. Curabitur vel gravida sem. Aliquam ac diam convallis, hendrerit tortor et, convallis diam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p> <p tabindex="1" onfocus="this.scrollIntoView()">Maecenas ligula ipsum, dictum id risus vel, vestibulum vestibulum velit. Morbi laoreet lobortis lorem id elementum. Ut eu efficitur velit, tempor dignissim leo. Fusce sed interdum diam. Suspendisse dictum magna vel ante rutrum molestie. Integer imperdiet gravida nisi nec varius. Curabitur facilisis tristique porttitor. Morbi viverra mauris semper pulvinar euismod. Nullam non vestibulum neque. Fusce sollicitudin sagittis mi consectetur tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam turpis ex, convallis posuere venenatis et, gravida vel purus. </p> <p tabindex="1" onfocus="this.scrollIntoView()">Praesent vel ultricies est, quis auctor metus. Aliquam sollicitudin nunc eget justo suscipit, a vulputate neque tempor. Aliquam lectus elit, molestie non ullamcorper a, ultricies at felis. Fusce nec justo feugiat enim hendrerit elementum sed vitae augue. Phasellus sem arcu, porta imperdiet metus sed, accumsan fringilla lorem. Fusce et pellentesque eros. Maecenas eget magna in sapien hendrerit condimentum quis ac erat. Mauris sed ante hendrerit dolor tempor congue. Nam ligula odio, tincidunt ac malesuada a, fermentum et nunc. Aenean ultricies pellentesque velit, quis tristique metus luctus quis. </p> <p tabindex="1" onfocus="this.scrollIntoView()">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam venenatis feugiat lobortis. Fusce tristique ligula a nulla placerat malesuada. Curabitur lobortis tempor ligula in viverra. Phasellus accumsan nunc id metus placerat bibendum. Curabitur vel gravida sem. Aliquam ac diam convallis, hendrerit tortor et, convallis diam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p> <p tabindex="1" onfocus="this.scrollIntoView()">Maecenas ligula ipsum, dictum id risus vel, vestibulum vestibulum velit. Morbi laoreet lobortis lorem id elementum. Ut eu efficitur velit, tempor dignissim leo. Fusce sed interdum diam. Suspendisse dictum magna vel ante rutrum molestie. Integer imperdiet gravida nisi nec varius. Curabitur facilisis tristique porttitor. Morbi viverra mauris semper pulvinar euismod. Nullam non vestibulum neque. Fusce sollicitudin sagittis mi consectetur tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam turpis ex, convallis posuere venenatis et, gravida vel purus. </p> <p tabindex="1" onfocus="this.scrollIntoView()">Praesent vel ultricies est, quis auctor metus. Aliquam sollicitudin nunc eget justo suscipit, a vulputate neque tempor. Aliquam lectus elit, molestie non ullamcorper a, ultricies at felis. Fusce nec justo feugiat enim hendrerit elementum sed vitae augue. Phasellus sem arcu, porta imperdiet metus sed, accumsan fringilla lorem. Fusce et pellentesque eros. Maecenas eget magna in sapien hendrerit condimentum quis ac erat. Mauris sed ante hendrerit dolor tempor congue. Nam ligula odio, tincidunt ac malesuada a, fermentum et nunc. Aenean ultricies pellentesque velit, quis tristique metus luctus quis. </p> <p tabindex="1" onfocus="this.scrollIntoView()">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam venenatis feugiat lobortis. Fusce tristique ligula a nulla placerat malesuada. Curabitur lobortis tempor ligula in viverra. Phasellus accumsan nunc id metus placerat bibendum. Curabitur vel gravida sem. Aliquam ac diam convallis, hendrerit tortor et, convallis diam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p> <p tabindex="1" onfocus="this.scrollIntoView()">Maecenas ligula ipsum, dictum id risus vel, vestibulum vestibulum velit. Morbi laoreet lobortis lorem id elementum. Ut eu efficitur velit, tempor dignissim leo. Fusce sed interdum diam. Suspendisse dictum magna vel ante rutrum molestie. Integer imperdiet gravida nisi nec varius. Curabitur facilisis tristique porttitor. Morbi viverra mauris semper pulvinar euismod. Nullam non vestibulum neque. Fusce sollicitudin sagittis mi consectetur tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam turpis ex, convallis posuere venenatis et, gravida vel purus. </p> <p tabindex="1" onfocus="this.scrollIntoView()">Praesent vel ultricies est, quis auctor metus. Aliquam sollicitudin nunc eget justo suscipit, a vulputate neque tempor. Aliquam lectus elit, molestie non ullamcorper a, ultricies at felis. Fusce nec justo feugiat enim hendrerit elementum sed vitae augue. Phasellus sem arcu, porta imperdiet metus sed, accumsan fringilla lorem. Fusce et pellentesque eros. Maecenas eget magna in sapien hendrerit condimentum quis ac erat. Mauris sed ante hendrerit dolor tempor congue. Nam ligula odio, tincidunt ac malesuada a, fermentum et nunc. Aenean ultricies pellentesque velit, quis tristique metus luctus quis. </p> <p style="height: 2000px" tabindex="1" onfocus="this.scrollIntoView()"> </p>
Note the addition of the 2000-pixel empty space at the end. That will ensure the last item scrolls to the top of the page, and then off. If you want to end the tabbing and scrolling at the last lorem ipsum block, simply remove the tabindex and onfocus attributes from the 2000-pixel element.
Accessibility warning
People with disabilities can use tabbing to move between and activate links. Test that you’re not breaking that by using this.