-
Notifications
You must be signed in to change notification settings - Fork 56
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(back to top): brand new component 🎉
- Loading branch information
Showing
14 changed files
with
347 additions
and
10 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,73 @@ | ||
| // Boosted only | ||
| // See https://moderncss.dev/pure-css-smooth-scroll-back-to-top/ | ||
| [id="#{$back-to-top-target-id}"]:target { | ||
| scroll-margin-top: $back-to-top-target-offset-top; | ||
| } | ||
|
|
||
| .back-to-top { | ||
| position: absolute; | ||
| top: $back-to-top-display-threshold; | ||
| right: $back-to-top-offset-right; | ||
| bottom: $back-to-top-offset-bottom; | ||
| z-index: $zindex-back-to-top; | ||
| pointer-events: none; | ||
|
|
||
| @include media-breakpoint-up(xl) { | ||
| right: $back-to-top-offset-right * 2; | ||
| bottom: $back-to-top-offset-bottom * 2; | ||
| } | ||
| } | ||
|
|
||
| .back-to-top-link { | ||
| position: sticky; | ||
| top: $back-to-top-link-offset-top; | ||
| // @TODO Could be dropped when .btn-icon come in | ||
| min-width: $back-to-top-width; | ||
| min-height: $back-to-top-height; | ||
| padding: 0; | ||
| // End @TODO | ||
| pointer-events: all; | ||
|
|
||
| @include media-breakpoint-up(xl) { | ||
| top: $back-to-top-link-offset-top-xl; | ||
|
|
||
| &[data-#{$boosted-variable-prefix}label]::before { | ||
| position: absolute; | ||
| right: $back-to-top-title-offset-right; | ||
| padding: $back-to-top-title-padding; | ||
| color: color-contrast($back-to-top-title-bg-color); | ||
| white-space: nowrap; | ||
| content: attr(data-#{$boosted-variable-prefix}label); | ||
| background-color: $back-to-top-title-bg-color; | ||
| } | ||
|
|
||
| &[data-#{$boosted-variable-prefix}label]:hover::before, | ||
| &[data-#{$boosted-variable-prefix}label]:focus::before { | ||
| text-decoration: $link-decoration; | ||
| } | ||
| } | ||
|
|
||
| /* &:not([title]) :only-child { | ||
| margin-right: $spacer / -2; | ||
| } */ | ||
|
|
||
| // @TODO Could be dropped when .btn-icon come in | ||
| &::after { | ||
| display: inline-block; | ||
| width: $back-to-top-icon-width; | ||
| height: $back-to-top-icon-height; | ||
| content: ""; | ||
| background: $back-to-top-icon-bg; | ||
| transform: rotate(.25turn); | ||
| } | ||
|
|
||
| &:hover:not(:active)::after, | ||
| &:focus:not(:active)::after { | ||
| filter: $back-to-top-icon-hover-filter; | ||
| } | ||
|
|
||
| &:not([title]):not([data-#{$boosted-variable-prefix}label])::after { | ||
| margin-left: $spacer / 2; | ||
| } | ||
| // End @TODO | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,139 @@ | ||
| --- | ||
| layout: docs | ||
| title: Back to top | ||
| description: Sticky back-to-top link appearing after scrolling down one viewport height. | ||
| group: components | ||
| toc: true | ||
| --- | ||
|
|
||
| ## Overview | ||
|
|
||
| Boosted "back to top" provides a way to get back to the top of the page using a simple link. It's built only with HTML and CSS, meaning you don't need any JavaScript. It only requires a `.back-to-top` wrapper and a `.back-to-top-link`, at the end of your `body`— just before your scripts. | ||
|
|
||
| For accessibility purposes, back-to-top link contains a `.visually-hidden` text content and a `data-o-label` attribute— whose **value should match hidden text content** to make sure it's usable with speech recognition software. The `data-o-label` attribute content is displayed in a `::before` pseudo-element thanks to the `attr()` CSS function. | ||
|
|
||
| We also recommend using a `nav` wrapper —alongside an accurate `aria-label`— to ease discoverability through landmarks. | ||
|
|
||
| Make sure you leave enough space between the back-to-top link and the bottom of the viewport to: | ||
| - prevent the component being overlapped by bottom navigation bar on mobile and notification tooltips for Windows users, | ||
| - avoid proximity with system interactive areas, which could lead to accidentally activating an adjacent target. | ||
|
|
||
|
|
||
| {{< callout >}} | ||
| ### Smooth scroll | ||
|
|
||
| Smooth scrolling does not depend on this component. It's turned on only when the user has **not** explicitly signaled that they’d prefer reduced motion (i.e. where `prefers-reduced-motion: no-preference`) through the `scroll-behavior` property. [Read more about `prefers-reduced-motion` in our accessibility page]({{< docsref "/getting-started/accessibility#reduced-motion" >}}). | ||
| {{< /callout >}} | ||
|
|
||
| ## Example | ||
|
|
||
| <div class="bd-example"> | ||
| <nav aria-label="Standard back to top example" class="back-to-top position-static ps-5 ms-5"> | ||
| <a href="#top" class="back-to-top-link btn btn-secondary position-relative top-0" data-o-label="Back to top"> | ||
| <span class="visually-hidden">Back to top</span> | ||
| </a> | ||
| </nav> | ||
| </div> | ||
| {{< example show_preview="false" >}} | ||
| <nav aria-label="Back to top" class="back-to-top"> | ||
| <a href="#top" class="back-to-top-link btn btn-secondary" data-o-label="Back to top"> | ||
| <span class="visually-hidden">Back to top</span> | ||
| </a> | ||
| </nav> | ||
| {{< /example >}} | ||
|
|
||
| {{< callout warning >}} | ||
| ### Define a target | ||
|
|
||
| Since we're using a link, **you need a valid target**. We recommend adding an anchor link at the beginning of your markup, like so: `<a id="top"></a>`. | ||
| You may use another `id`, but if you're using a fixed header you'll need to override our `$back-to-top-target-id` variable to ensure it won't overlap content after scrolling up. | ||
| {{< /callout >}} | ||
|
|
||
| ### Always visible | ||
|
|
||
| Add `.position-fixed` utility to your `.back-to-top-link` to make your back-to-top link persistent. | ||
|
|
||
| {{< example show_preview="false" >}} | ||
| <nav aria-label="Fixed back to top example" class="back-to-top"> | ||
| <a href="#top" class="back-to-top-link position-fixed btn btn-secondary" data-o-label="Back to top"> | ||
| <span class="visually-hidden">Back to top</span> | ||
| </a> | ||
| </nav> | ||
| {{< /example >}} | ||
|
|
||
| ### Label inside | ||
|
|
||
| Drop the `data-o-label` attribute and the `<span class="visually-hidden">` and use [spacing utilities]({{< docsref "/utilities/spacing" >}}) to fine tune your button. | ||
|
|
||
| <div class="bd-example"> | ||
| <nav aria-label="Label inside back to top example" class="back-to-top position-static"> | ||
| <a href="#top" class="back-to-top-link position-static btn btn-secondary px-2">Back to top</a> | ||
| </nav> | ||
| </div> | ||
| {{< example show_preview="false" >}} | ||
| <nav aria-label="Back to top" class="back-to-top"> | ||
| <a href="#top" class="back-to-top-link btn btn-secondary px-2">Back to top</a> | ||
| </nav> | ||
| {{< /example >}} | ||
|
|
||
| ### Icon only | ||
|
|
||
| Use a `title` attribute instead of `data-o-label` to ensure a visible label is still provided on demand for sighted users. | ||
|
|
||
| <div class="bd-example"> | ||
| <nav aria-label="Icon only back to top example" class="back-to-top position-static"> | ||
| <a href="#top" class="back-to-top-link position-static btn btn-secondary" title="Back to top"> | ||
| <span class="visually-hidden">Back to top</span> | ||
| </a> | ||
| </nav> | ||
| </div> | ||
| {{< example show_preview="false" >}} | ||
| <nav aria-label="Back to top" class="back-to-top"> | ||
| <a href="#top" class="back-to-top-link btn btn-secondary" title="Back to top"> | ||
| <span class="visually-hidden">Back to top</span> | ||
| </a> | ||
| </nav> | ||
| {{< /example >}} | ||
|
|
||
| ## Sass options | ||
|
|
||
| Back to top link can be customized in a few ways: either making it appear after more or less vertical scrolling, modify its offset from the bottom right corner, etc. | ||
|
|
||
| <table class="table"> | ||
| <thead> | ||
| <tr> | ||
| <th>Variable</th> | ||
| <th>Description</th> | ||
| <th>Default</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td><code>$back-to-top-display-threshold</code></td> | ||
| <td> | ||
| Defines the vertical threshold at which "back to top" link appears. | ||
| </td> | ||
| <td><code>100vh</code></td> | ||
| </tr> | ||
| <tr> | ||
| <td><code>$back-to-top-target-id</code></td> | ||
| <td> | ||
| Target's <code>id</code>, used to apply <code>scroll-margin-top</code> when anchor is active. | ||
| </td> | ||
| <td><code>"top"</code></td> | ||
| </tr> | ||
| <tr> | ||
| <td><code>$back-to-top-offset</code></td> | ||
| <td> | ||
| Base offset, used to place "back to top" link in the bottom right corner of the page. | ||
| </td> | ||
| <td><code>$spacer * 1.5</code></td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
|
|
||
| ### Variables | ||
|
|
||
| For more details, please have a look at the exhaustive list of available variables: | ||
|
|
||
| {{< scss-docs name="back-to-top" file="scss/_variables.scss" >}} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.