<div class="row back-to-top">
<a class="button back-to-top__button back-to-top__button--visible back-to-top__button--default-visible" href="#top" aria-hidden="true" role="presentation" tabindex="-1">
</a>
</div>
.back-to-top__wrapper {
bottom: 0;
left: 0;
pointer-events: none;
position: relative;
top: 0;
// put on a separate compositor layer so we don't have to repaint all the time
transform: translate3d(0, 0, 0);
z-index: 3;
@supports ((position: sticky) or (position: -webkit-sticky)) {
position: sticky;
}
}
.back-to-top {
position: relative;
text-align: right;
@include respond-to($grid-breakpoint-s) {
padding-bottom: $column-inner-width + $column-padding * 2;
}
}
.back-to-top__button {
@include largeArrowButton('up');
background-position: 50% 46%; // because of box shadow needs to move off center
bottom: 0;
margin-bottom: auto;
opacity: 0;
pointer-events: auto;
right: 0;
transform: scale(0);
transition: opacity $hoverTransLength, transform $hoverTransLength;
@include respond-to($grid-breakpoint-m) {
left: auto;
right: auto;
}
}
.back-to-top__button--visible,
.back-to-top__button--default-visible {
opacity: 1;
transform: scale(1);
transition: opacity 0.25s, transform 0.25s;
}
/*------------------------------------*\
Overrides button classes
\*------------------------------------*/
.button.back-to-top__button,
.button.scroll-link {
padding: 0;
}
// overriding aria-hidden display: none
.enhanced .button.back-to-top__button[aria-hidden] {
display: inline-block;
}
/**
* this method updates the back to top button unstick offset and show threshold
*/
import $ from 'jquery';
export default function updateBackToTopOffsets() {
if (!document.querySelector('.back-to-top__button')) {
this.backToTopOffsetTop = 0;
this.backToTopBtnShowThreshold = 0;
return;
}
// by default, we take the document scrollTop
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
// calculate when back to top button should show
// 100px is roughly the header height, should be fine
$('.back-to-top__button').css('bottom', '0px');
this.backToTopBtnShowThreshold = 100;
// see if we should display the back-to-top button
if (scrollTop > this.backToTopBtnShowThreshold) {
$('.back-to-top__button').addClass('back-to-top__button--visible');
$('.scroll-link').addClass('scroll-link--hidden');
} else {
$('.back-to-top__button').removeClass('back-to-top__button--visible');
$('.scroll-link').removeClass('scroll-link--hidden');
}
};
A button which returns the user to the top of the page. Used on all pages.
{
"visible_by_default": true
}