<p>Scroll-to-top buttons are great for pages that are long enough to require a few scrolls to read everything. They&#39;re even better for extremely long pages. Scrolling is a lot of work for some users, especially on a mobile device. We (website creators) can greatly reduce the amount of work it takes to scroll our pages with surprisingly little effort on our part.</p>
<p>One example is the <a href="https://www.w3.org/TR/wai-aria-practices-1.1">WAI-ARIA Authoring Practices</a>, which is 140,923 pixels tall at the time of this writing. I&#39;m not calling them out, it&#39;s just one of my favorite pages on the entire internet! <a href="https://ashleemboyer.com/my-favorite-resource-for-making-accessible-custom-components">It&#39;s a great resource for making accessible custom components</a>.</p>
<p>Making a scroll-to-top button and making it scroll smoothly is probably a lot easier than you think. It&#39;s definitely a lot easier than <em>I</em> thought! The code bits I&#39;m about to show are for React and SCSS, but you don&#39;t need to know either. The basic concepts here are for JavaScript and CSS. We&#39;ll also cover how to get rid of the smooth scrolling when it&#39;s an accessibility concern.</p>
<h2 id="the-scss-code">The SCSS Code</h2>
<p>First, let&#39;s make sure this scroll will happen smoothly. To do so, set <code>scroll-behavior</code> to <code>smooth</code> in a global stylesheet under the <code>html</code> element. The media query I&#39;ve added is for accessibility. Animations can be distracting or for some users, like myself, have vestibular disorders where animations can cause harmful physical effects. These effects can include dizziness, nausea, and headaches or migraines.</p>
<p>We can prevent this harm to these users who have set up their device to reduce motion by using the <code>prefers-reduced-motion</code> CSS media query. Inside of it, we set the <code>scroll-behavior</code> to <code>auto</code>, which is the default. If you&#39;d like to read more about this technique, it&#39;s thoroughly covered in <a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C39">WCAG 2.1</a>.</p>
<pre class="language-scss">||<div>||<span class="line-number">1</span>||<span class="line-of-code">html {</span>||</div>||<div>||<span class="line-number">2</span>||<span class="line-of-code">  scroll-behavior: smooth;</span>||</div>||<div>||<span class="line-number">3</span>||<span class="line-of-code"></span>||</div>||<div>||<span class="line-number">4</span>||<span class="line-of-code">  @media (prefers-reduced-motion: reduce) {</span>||</div>||<div>||<span class="line-number">5</span>||<span class="line-of-code">    scroll-behavior: auto;</span>||</div>||<div>||<span class="line-number">6</span>||<span class="line-of-code">  }</span>||</div>||<div>||<span class="line-number">7</span>||<span class="line-of-code">}</span>||</div>||<div>||<span class="line-number">8</span>||<span class="line-of-code"></span>||</div>||</pre>

<h2 id="the-react-code">The React Code</h2>
<p>Now, add a button to the bottom of your page with lots of content. The important line of code here is <code>window.scrollTo(0, 0)</code>. This is what will scroll your page to the top. You can read more about this function <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo">on MDN</a>.</p>
<pre class="language-jsx">||<div>||<span class="line-number">1</span>||<span class="line-of-code"><button</span>||</div>||<div>||<span class="line-number">2</span>||<span class="line-of-code">  onClick={() => {</span>||</div>||<div>||<span class="line-number">3</span>||<span class="line-of-code">    window.scrollTo(0, 0);</span>||</div>||<div>||<span class="line-number">4</span>||<span class="line-of-code">  }}</span>||</div>||<div>||<span class="line-number">5</span>||<span class="line-of-code">></span>||</div>||<div>||<span class="line-number">6</span>||<span class="line-of-code">  Scroll to top</span>||</div>||<div>||<span class="line-number">7</span>||<span class="line-of-code"></button></span>||</div>||<div>||<span class="line-number">8</span>||<span class="line-of-code"></span>||</div>||</pre>

<h2 id="managing-focus">Managing focus</h2>
<p>Finally, we must also address focus management when adding a scroll-to-top button to our sites. If we add nothing else to our code from above, the button will still have focus after it is clicked. What this means for users who navigate pages with a keyboard is that the page&#39;s focus is not where they expect it to be. They expect it to be at the top of the page when it&#39;s not.</p>
<p>In your button&#39;s <code>onClick</code> listener, after <code>window.scrollTo(0, 0)</code>, you need to manually put something at the top of your page in focus. In this article, for example, I can call <code>focus</code> on the <code>&lt;h1&gt;</code> element containing the article title. We just need to add one thing to that element in order for this to work without interrupting normal keyboard navigation. That thing is <code>tabindex=&quot;-1&quot;</code>.</p>
<p>My <code>&lt;h1&gt;</code> element will then look like this (in React):</p>
<pre class="language-jsx">||<div>||<span class="line-number">1</span>||<span class="line-of-code"><h1 id="article-title" tabIndex="-1"></span>||</div>||<div>||<span class="line-number">2</span>||<span class="line-of-code">  Accessible, Smooth Scroll-to-top Buttons with Little Code</span>||</div>||<div>||<span class="line-number">3</span>||<span class="line-of-code"></h1></span>||</div>||<div>||<span class="line-number">4</span>||<span class="line-of-code"></span>||</div>||</pre>

<p>And here&#39;s what button will look like with this specific example:</p>
<pre class="language-jsx">||<div>||<span class="line-number">1</span>||<span class="line-of-code"><button</span>||</div>||<div>||<span class="line-number">2</span>||<span class="line-of-code">  onClick={() => {</span>||</div>||<div>||<span class="line-number">3</span>||<span class="line-of-code">    window.scrollTo(0, 0);</span>||</div>||<div>||<span class="line-number">4</span>||<span class="line-of-code"></span>||</div>||<div>||<span class="line-number">5</span>||<span class="line-of-code">    // focus management</span>||</div>||<div>||<span class="line-number">6</span>||<span class="line-of-code">    const title = document.getElementById('article-title');</span>||</div>||<div>||<span class="line-number">7</span>||<span class="line-of-code">    title.focus();</span>||</div>||<div>||<span class="line-number">8</span>||<span class="line-of-code">  }}</span>||</div>||<div>||<span class="line-number">9</span>||<span class="line-of-code">></span>||</div>||<div>||<span class="line-number">10</span>||<span class="line-of-code">  Scroll to top</span>||</div>||<div>||<span class="line-number">11</span>||<span class="line-of-code"></button></span>||</div>||<div>||<span class="line-number">12</span>||<span class="line-of-code"></span>||</div>||</pre>

<h2 id="conclusion">Conclusion</h2>
<p>That&#39;s it! It really is just a few lines of code. After you add this, everyone will be able to quickly scroll to the top of your website. You&#39;ve also made it so your site doesn&#39;t accidentally harm someone who can&#39;t tolerate animations! Well done. I am proud of you!</p>


<p>Let&#39;s say you allow 5 sizes of icons in your web application and they&#39;re in 6-pixel increments: 12, 18, 24, 30, and 36. Your Sass file might have something like the following to handle this:</p>
<pre>||<div>||<span class="line-number">1</span>||<span class="line-of-code">.Icon {</span>||</div>||<div>||<span class="line-number">2</span>||<span class="line-of-code">  &--size-12 {</span>||</div>||<div>||<span class="line-number">3</span>||<span class="line-of-code">    width: 12px;</span>||</div>||<div>||<span class="line-number">4</span>||<span class="line-of-code">    height: 12px;</span>||</div>||<div>||<span class="line-number">5</span>||<span class="line-of-code">    font-size: 12px;</span>||</div>||<div>||<span class="line-number">6</span>||<span class="line-of-code">  }</span>||</div>||<div>||<span class="line-number">7</span>||<span class="line-of-code"></span>||</div>||<div>||<span class="line-number">8</span>||<span class="line-of-code">  &--size-18 {</span>||</div>||<div>||<span class="line-number">9</span>||<span class="line-of-code">    width: 18px;</span>||</div>||<div>||<span class="line-number">10</span>||<span class="line-of-code">    height: 18px;</span>||</div>||<div>||<span class="line-number">11</span>||<span class="line-of-code">    font-size: 18px;</span>||</div>||<div>||<span class="line-number">12</span>||<span class="line-of-code">  }</span>||</div>||<div>||<span class="line-number">13</span>||<span class="line-of-code"></span>||</div>||<div>||<span class="line-number">14</span>||<span class="line-of-code">  &--size-24 {</span>||</div>||<div>||<span class="line-number">15</span>||<span class="line-of-code">    width: 24px;</span>||</div>||<div>||<span class="line-number">16</span>||<span class="line-of-code">    height: 24px;</span>||</div>||<div>||<span class="line-number">17</span>||<span class="line-of-code">    font-size: 24px;</span>||</div>||<div>||<span class="line-number">18</span>||<span class="line-of-code">  }</span>||</div>||<div>||<span class="line-number">19</span>||<span class="line-of-code"></span>||</div>||<div>||<span class="line-number">20</span>||<span class="line-of-code">  &--size-30 {</span>||</div>||<div>||<span class="line-number">21</span>||<span class="line-of-code">    width: 30px;</span>||</div>||<div>||<span class="line-number">22</span>||<span class="line-of-code">    height: 30px;</span>||</div>||<div>||<span class="line-number">23</span>||<span class="line-of-code">    font-size: 30px;</span>||</div>||<div>||<span class="line-number">24</span>||<span class="line-of-code">  }</span>||</div>||<div>||<span class="line-number">25</span>||<span class="line-of-code"></span>||</div>||<div>||<span class="line-number">26</span>||<span class="line-of-code">  &--size-36 {</span>||</div>||<div>||<span class="line-number">27</span>||<span class="line-of-code">    width: 36px;</span>||</div>||<div>||<span class="line-number">28</span>||<span class="line-of-code">    height: 36px;</span>||</div>||<div>||<span class="line-number">29</span>||<span class="line-of-code">    font-size: 36px;</span>||</div>||<div>||<span class="line-number">30</span>||<span class="line-of-code">  }</span>||</div>||<div>||<span class="line-number">31</span>||<span class="line-of-code">}</span>||</div>||<div>||<span class="line-number">32</span>||<span class="line-of-code"></span>||</div>||</pre>

<p>These all look really similar, right? The class names all have the same format, and each one sets a <code>width</code>, <code>height</code>, and <code>font-size</code> to be the same thing. Would you believe me if I told you that it&#39;s possible to dynamically create blocks of CSS for class names in Sass?</p>
<p>Well, believe me! It&#39;s true!</p>
<p>Here&#39;s one way you can introduce a <code>@for</code> to do this:</p>
<pre>||<div>||<span class="line-number">1</span>||<span class="line-of-code">.Icon {</span>||</div>||<div>||<span class="line-number">2</span>||<span class="line-of-code">  @for $i from 1 through 5 {</span>||</div>||<div>||<span class="line-number">3</span>||<span class="line-of-code">    $base-size: 12;</span>||</div>||<div>||<span class="line-number">4</span>||<span class="line-of-code">    $increment: 6;</span>||</div>||<div>||<span class="line-number">5</span>||<span class="line-of-code">    $calculated-size: $base-size + ($i * $increment);</span>||</div>||<div>||<span class="line-number">6</span>||<span class="line-of-code"></span>||</div>||<div>||<span class="line-number">7</span>||<span class="line-of-code">    &--size-#{$calculated-size} {</span>||</div>||<div>||<span class="line-number">8</span>||<span class="line-of-code">      width: #{$calculated-size}px;</span>||</div>||<div>||<span class="line-number">9</span>||<span class="line-of-code">      height: #{$calculated-size}px;</span>||</div>||<div>||<span class="line-number">10</span>||<span class="line-of-code">      font-size: #{$calculated-size}px;</span>||</div>||<div>||<span class="line-number">11</span>||<span class="line-of-code">    }</span>||</div>||<div>||<span class="line-number">12</span>||<span class="line-of-code">  }</span>||</div>||<div>||<span class="line-number">13</span>||<span class="line-of-code">}</span>||</div>||<div>||<span class="line-number">14</span>||<span class="line-of-code"></span>||</div>||</pre>

<p>What if you don&#39;t have even increments, though? You can also loop through an array of values like this:</p>
<pre>||<div>||<span class="line-number">1</span>||<span class="line-of-code">$icon-sizes: 12, 16, 32, 48;</span>||</div>||<div>||<span class="line-number">2</span>||<span class="line-of-code"></span>||</div>||<div>||<span class="line-number">3</span>||<span class="line-of-code">.Icon {</span>||</div>||<div>||<span class="line-number">4</span>||<span class="line-of-code">  @each $size in $icon-sizes {</span>||</div>||<div>||<span class="line-number">5</span>||<span class="line-of-code">    &--size-#{$size} {</span>||</div>||<div>||<span class="line-number">6</span>||<span class="line-of-code">      width: #{size}px;</span>||</div>||<div>||<span class="line-number">7</span>||<span class="line-of-code">      height: #{size}px;</span>||</div>||<div>||<span class="line-number">8</span>||<span class="line-of-code">      font-size: #{size}px;</span>||</div>||<div>||<span class="line-number">9</span>||<span class="line-of-code">    }</span>||</div>||<div>||<span class="line-number">10</span>||<span class="line-of-code">  }</span>||</div>||<div>||<span class="line-number">11</span>||<span class="line-of-code">}</span>||</div>||<div>||<span class="line-number">12</span>||<span class="line-of-code"></span>||</div>||</pre>


Ashlee M Boyer

Posts with the "css" tag

Accessible, Smooth Scroll-to-top Buttons with Little Code

How to Dynamically Create Many Similar CSS Classes with Sass