PDJ Brandbox

back-to-top 

<!-- !!!!! For testing purposes only !!!!! -->
<div style="min-height:500vh;padding:var(--gutter--bucket);">Minimum screen width of 1200px and scroll down to test</div>
<!-- !!!!! / For testing purposes only !!!!! -->

<div class="back-to-top">
    <div class="back-to-top__link">back to top <span class="back-to-top__arrow"></span></div>
</div>
 
<!-- !!!!! For testing purposes only !!!!! -->
<div style="min-height:500vh;padding:var(--gutter--bucket);">Minimum screen width of 1200px and scroll down to test</div>
<!-- !!!!! / For testing purposes only !!!!! -->

<div class="back-to-top">
  <div class="back-to-top__link">back to top <span class="back-to-top__arrow"></span></div>
</div>
 
/* No context defined. */
  • Content: 
    const BACKTOTOP = ((w, d, undefined) => {

  'use strict';

  const selectors = {
    theTrigger: '.back-to-top__link',
  };

  const classes = {
    showIt: 'show-back-to-top',
  };

  const els = {};

  const init = () => {
    els.theTrigger = d.querySelectorAll(selectors.theTrigger);

    d.body.classList.add(classes.showIt);

    [...els.theTrigger].forEach((theTrigger) => {
      theTrigger.addEventListener('click', (e) => {
        e.preventDefault();

        d.body.scrollIntoView({
          behavior: 'smooth',
        });
      });
    });

    scroll(true);
  };

  const scroll = (onInit) => {
    if (!onInit && w.scrollY % 10) { return; }

    (w.scrollY < (w.innerHeight * 1))
    ? d.body.classList.remove(classes.showIt)
    : d.body.classList.add(classes.showIt);
  };

  d.addEventListener('DOMContentLoaded', init);
  w.addEventListener('scroll', scroll);

  return {};

})(window, window.document);
  • URL: /components/raw/back-to-top/back-to-top.js
  • Filesystem Path: ../src/02_atoms/back-to-top/back-to-top.js
  • Size: 926 Bytes
  • Content: 
    .back-to-top {
  display: none;

  @media (min-width: 1200px) {
    position: sticky;
    right: 0;
    bottom: 0;
    z-index: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    height: 0;
    width: 100%;
    max-width: var(--section--9);
    margin-right: auto;
    margin-left: auto;
    pointer-events: none;

    @supports (mix-blend-mode: difference) {
      color: var(--color--neutrals-0);
      mix-blend-mode: difference;
    }
  }
}

.back-to-top__link {
  @media (min-width: 1200px) {
    transition: opacity 350ms;
    transform: rotate(-90deg) translate(calc(100% + var(--gutter--bucket)), 0);
    transform-origin: 100% 100%;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    height: calc((100vw - var(--section--8)) / 2);
    font-weight: 500;
    text-transform: uppercase;
    opacity: 0;
    pointer-events: all;

    .show-back-to-top & {
      opacity: 1;
      cursor: pointer;
    }
  }

  @media (min-width: 1440px) {
    height: calc((var(--section--9) - var(--section--8)) / 2);
  }
}

.back-to-top__arrow {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 40px;
  height: 1px;
  margin-left: var(--gap--2);
  background-color: currentColor;
  opacity: .7;
}

.back-to-top__arrow:after {
  display: block;
  width: 0;
  height: 0;
  margin-right: -2px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 10px solid currentColor;
  content: '';
}
  • URL: /components/raw/back-to-top/back-to-top.scss
  • Filesystem Path: ../src/02_atoms/back-to-top/back-to-top.scss
  • Size: 1.5 KB

No notes defined.