BUX Component Development Platform

Back to Top 

<a href="#top" id="bux-back-to-top" class="bux-back-to-top">
    <span class="bux-back-to-top__icon icon icon-jump-top" aria-hidden="true"></span>
    <span class="bux-back-to-top__text">Back to top</span>
</a>
 
<a href="#top" id="bux-back-to-top" class="bux-back-to-top">
  <span class="bux-back-to-top__icon icon icon-jump-top" aria-hidden="true"></span>
  <span class="bux-back-to-top__text">{{ text|default("Back to top") }}</span>
</a>
 
site_name_prefix: Office of
site_name: Learning Relations Excellence
site_slogan: Additional text or site slogan
address_1: 100 Building Name
address_2: 1 Oval Mall
city: Columbus
state: OH
zip: '43210'
contact_email: email@osu.edu
contact_phone: 614-292-OHIO
contact_tty: 614-688-8605
scroll_pages: 2
  • Content: 
    .bux-back-to-top {
	display: none;
	position: fixed;
	bottom: $sp-16;
	right: $sp-16;
	z-index: 99;
	background-color: $white;
	border: 2px solid $scarlet;
	color: $scarlet;
	font-weight: 600;
	padding: rem-calc(8 16);
	align-items: center;
    text-decoration: none;
	&:hover {
		background: $gray-dark-60;
		color: $white;
		border-color: $gray-dark-60;
		cursor: pointer;
	}
	&:focus {
		outline: 2px solid $focus;
		outline-offset: 1px;
	}

	@include breakpoint(md) {
		bottom: $sp-32;
	}
}

.bux-back-to-top__text {
	@include visually-hidden();

	@include breakpoint(md) {
		@include visually-hidden-reset();
		display: block;
		font-size: $ts-base;
		padding-bottom: rem-calc(22) !important;
	}
}

.bux-back-to-top__icon {
	color: $scarlet;
	font-size: $ts-20;
	padding-top: rem-calc(4);

	&::before {
		margin-bottom: rem-calc(-10);
	}

	@include breakpoint(md) {
		margin-right: $sp-8;
	}
}

.bux-back-to-top:hover .bux-back-to-top__icon {
	color: $white;
}
  • URL: /components/raw/back-to-top/_back-to-top.scss
  • Filesystem Path: src/components/back-to-top/_back-to-top.scss
  • Size: 966 Bytes
  • Content: 
    {
    const backToTopBtn = document.getElementById("bux-back-to-top");

    if (backToTopBtn) {
        const lastContentContainer = backToTopBtn.previousElementSibling;
        let lastPaddingBottom = window
            .getComputedStyle(backToTopBtn, null)
            .getPropertyValue("padding-bottom");

        window.onscroll = function () {
            if (
                document.body.scrollTop > 20 ||
                document.documentElement.scrollTop > 20
            ) {
                backToTopBtn.style.display = "flex";
                lastContentContainer.style.paddingBottom = "100px";
            } else {
                backToTopBtn.style.display = "none";
                lastContentContainer.style.paddingBottom = lastPaddingBottom;
            }
        };
    }
}
  • URL: /components/raw/back-to-top/back-to-top.js
  • Filesystem Path: src/components/back-to-top/back-to-top.js
  • Size: 792 Bytes

No notes defined.