BUX Component Development Platform

Back to Top 

<a class="bux-back-to-top" href="#top" rel="noopener" id="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>
 
{% embed '@link' with {
    base_class: 'bux-back-to-top',
    link_url: '#top',
    attributes: {
        id: 'bux-back-to-top'
    }
}
%}
    {% block content %}
        <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>
    {% endblock %}
{% endembed %}
 
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) {
      let lastScrollY = window.scrollY;

       window.onscroll = function () {
          if (lastScrollY > window.scrollY) {
            setBackToTopStyling();
          }
          lastScrollY = window.scrollY;
        };
    }

    function isAtBackToTopThreshold(threshold) {
      return (
        document.body.scrollTop > threshold ||
        document.documentElement.scrollTop > threshold
      );
    }

  function setBackToTopStyling() {
    const doubleWindowHeight = window.innerHeight * 2;
    const lastContentContainer = backToTopBtn.previousElementSibling;

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

    if (isAtBackToTopThreshold(doubleWindowHeight)) {
      backToTopBtn.style.display = "flex";

      if (lastContentContainer) {
        lastContentContainer.style.paddingBottom = "100px";
      }
    } else {
      backToTopBtn.style.display = "none";

      if (lastContentContainer) {
        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: 1.2 KB
  • Content: 
    {
    const backToTopButton = document.querySelector("#bux-back-to-top");

    if (backToTopButton instanceof HTMLElement) {
        let lastScrollY = window.scrollY;

        window.addEventListener('scroll', function () {
            if (lastScrollY > window.scrollY) {
                setBackToTopStyling(backToTopButton);
            }
            lastScrollY = window.scrollY;
        });
    }

    function isAtBackToTopThreshold(threshold: number) {
        return (
            document.body.scrollTop > threshold ||
            document.documentElement.scrollTop > threshold
        );
    }

    function setBackToTopStyling(buxButton: HTMLElement) {
        const doubleWindowHeight = window.innerHeight * 2;
        const lastContentContainer = buxButton.previousElementSibling;

        let lastPaddingBottom;
        if (lastContentContainer) {
            lastPaddingBottom = globalThis
                .getComputedStyle(buxButton)
                .getPropertyValue("padding-bottom");
        }

        if (isAtBackToTopThreshold(doubleWindowHeight)) {
            buxButton.style.display = "flex";

            if (lastContentContainer instanceof HTMLElement) {
                lastContentContainer.style.paddingBottom = "100px";
            }
        } else {
            buxButton.style.display = "none";

            if (lastContentContainer instanceof HTMLElement && typeof lastPaddingBottom === 'string') {
                lastContentContainer.style.paddingBottom = lastPaddingBottom;
            }
        }
    }
}
  • URL: /components/raw/back-to-top/back-to-top.ts
  • Filesystem Path: src/components/back-to-top/back-to-top.ts
  • Size: 1.5 KB

No notes defined.