<div class="hero" id="top">
  <div class="hero__title">
    <h1>
      Sticky Back-To-Top&nbsp;Button
    </h1>

    <p>
      Unveils while scrolling. Instead of using a performance wasting scroll-trigger, this demo is using use a modern Intersection&nbsp;Observer.
    </p>
  </div>
</div>

<main id="scroll-observe-target">
  <div class="text-wrap">
    <p class="lead">
      Jesus, you smoke too? Wait a minute, wait a minute. 1:15 in the morning? Oh yes sir. George. George. Whoa, they really cleaned this place up, looks brand new.
    </p>

    <p>
      Don't worry, I'll take care of the lightning, you take care of your pop. By the way, what happened today, did he ask her out? Doc, she's beautiful. She's crazy about me. Look at this, look what she wrote me, Doc. That says it all. Doc, you're my only hope. That was so stupid, Grandpa hit him with the car. Uh, well, okay Biff, uh, I'll finish that on up tonight and I'll bring it over first thing tomorrow morning. Now Biff, don't con me.
    </p>

    <p>
      Get your meat hooks off of me. C'mon, c'mon let's go. Uh, yeah. Whoa, whoa, Biff, what's that? Look at the time, you've got less than 4 minutes, please hurry.
    </p>

    <p>
      How about a ride, Mister? Yeah Mom, we know, you've told us this story a million times. You felt sorry for him so you decided to go with him to The Fish Under The Sea Dance. Well uh, good, fine. I don't wanna know your name. I don't wanna know anything anything about you. God dammit, I'm late.
    </p>

    <p>
      Hello. No. Hey George, heard you laid out Biff, nice going. Yeah, where does he live? What?
    </p>

    <p>
      What did I just say? Scram, McFly. Right. Why am I always the last one to know about these things. Who?
    </p>

    <p>
      Are you sure about this storm? Get your meat hooks off of me. What? That's good advice, Marty. Wait a minute, wait a minute. 1:15 in the morning?
    </p>

    <p>
      Now that's a risk you'll have to take you're life depends on it. Look, you gotta listen to me. Yeah. Excuse me. Alright, punk, now-
    </p>

    <p>
      Well uh, good, fine. Why thank you, Marty. George. Good morning, sleepyhead, Good morning, Dave, Lynda Alright, let's set your destination time. This is the exact time you left. I'm gonna send you back at exactly the same time. It's be like you never left. Now, I painted a white line on the street way over there, that's where you start from. I've calculated the distance and wind resistance fresh to active from the moment the lightning strikes, at exactly 7 minutes and 22 seconds. When this alarm goes off you hit the gas. You're gonna break his arm. Biff, leave him alone. Let him go. Let him go. Where the hell are they.
    </p>

    <p>
      Why not? Look, you gotta listen to me. Doc. Marty, that was very interesting music. There, there, now, just relax. You've been asleep for almost nine hours now.
    </p>

    <p>
      Jesus, you smoke too? Wait a minute, wait a minute. 1:15 in the morning? Oh yes sir. George. George. Whoa, they really cleaned this place up, looks brand new.
    </p>

    <p>
      Don't worry, I'll take care of the lightning, you take care of your pop. By the way, what happened today, did he ask her out? Doc, she's beautiful. She's crazy about me. Look at this, look what she wrote me, Doc. That says it all. Doc, you're my only hope. That was so stupid, Grandpa hit him with the car. Uh, well, okay Biff, uh, I'll finish that on up tonight and I'll bring it over first thing tomorrow morning. Now Biff, don't con me.
    </p>

    <p>
      Get your meat hooks off of me. C'mon, c'mon let's go. Uh, yeah. Whoa, whoa, Biff, what's that? Look at the time, you've got less than 4 minutes, please hurry.
    </p>

    <p>
      How about a ride, Mister? Yeah Mom, we know, you've told us this story a million times. You felt sorry for him so you decided to go with him to The Fish Under The Sea Dance. Well uh, good, fine. I don't wanna know your name. I don't wanna know anything anything about you. God dammit, I'm late.
    </p>

    <p>
      Hello. No. Hey George, heard you laid out Biff, nice going. Yeah, where does he live? What?
    </p>

    <p>
      What did I just say? Scram, McFly. Right. Why am I always the last one to know about these things. Who?
    </p>

    <p>
      Are you sure about this storm? Get your meat hooks off of me. What? That's good advice, Marty. Wait a minute, wait a minute. 1:15 in the morning?
    </p>

    <p>
      Now that's a risk you'll have to take you're life depends on it. Look, you gotta listen to me. Yeah. Excuse me. Alright, punk, now-
    </p>

    <p>
      Well uh, good, fine. Why thank you, Marty. George. Good morning, sleepyhead, Good morning, Dave, Lynda Alright, let's set your destination time. This is the exact time you left. I'm gonna send you back at exactly the same time. It's be like you never left. Now, I painted a white line on the street way over there, that's where you start from. I've calculated the distance and wind resistance fresh to active from the moment the lightning strikes, at exactly 7 minutes and 22 seconds. When this alarm goes off you hit the gas. You're gonna break his arm. Biff, leave him alone. Let him go. Let him go. Where the hell are they.
    </p>

    <p>
      Why not? Look, you gotta listen to me. Doc. Marty, that was very interesting music. There, there, now, just relax. You've been asleep for almost nine hours now.
    </p>
    
    <footer class="footer">
      UI/UX &amp; Code: David Maciejewski <a href="https://mmacx.io" target="_blank" rel="noopener">@macx</a><br>
      Photo: <a href="https://unsplash.com/@simonmigaj" target="_blank" rel="noopener">@simonmigaj</a><br>
      Text: Text Generator <a href="https://satoristudio.net/delorean-ipsum/" target="_blank" rel="noopener">DeLorean Ipsum</a>
    </footer>
  </div>
</main>

<a href="#top" class="btt-button" id="scroll-to-top-button" aria-label="Nach oben scrollen">
  <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" aria-hidden="true" focusable="false">
    <path d="M0 0h24v24H0V0z" fill="none" />
    <path d="m4 12 1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z" />
  </svg>
</a>

:root {
  --content-width: 40rem;
  --spacing: 2rem;
  
  --clr-bg: #F5F5F4;
  --clr-text: #1C1917;
  --clr-text--light: #78716C;
  --clr-line: #D6D3D1;
  --clr-primary: #ff8200;
  
  --font-size: 1rem;
  --font-size--header: 2rem;
  --font-size--small: 0.875rem;
  
  @media screen and (min-width: 650px) {
    --spacing: 3rem;
    --font-size: 1.25rem;
    --font-size--header: 2.5rem;
    --font-size--small: 1rem;
  }
  
  @media screen and (min-width: 1110px) {
    --font-size--header: 3rem;
  }
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: 'Rubik', serif;
  font-size: var(--font-size);
  line-height: 1.4;
  margin: 0;
  background-color: var(--clr-bg);
  color: var(--clr-text);
}

h1,
h2,
h3 {
  font-family: 'Bitter', sans-serif;
  color: var(--clr-text);
  font-weight: 500;
}

a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: var(--clr-primary);
  padding: 0 0.2em;
  transition: all 250ms ease;
  
  &:hover {
    background-color: var(--clr-primary);
    color: var(--clr-bg);
    border-radius: 0.5em;
  }
}

strong, b {
  font-weight: 400;
}

.lead {
  font-size: 1.2em;
  color: var(--clr-text--light);
}

.hero {
  height: 100vh;
  background-image: url('https://images.unsplash.com/photo-1529772942463-35a62ea332b8?crop=face&cs=tinysrgb&fit=crop&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0Mzc5MzU2Mw&ixlib=rb-1.2.1&q=80&h=800&w=400');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: var(--clr-text--light);
  
  &__title {
    padding: 5rem var(--spacing) var(--spacing);
    max-width: 80%;
    
    h1 {
      margin: 0 0 .6em;
      font-size: var(--font-size--header);
      line-height: 1.3;
      color: var(--clr-primary);
      text-shadow: 0 1px 2px rgba(28, 25, 23, .3);
    }
    
    p {
      margin: 0;
      font-size: var(--font-size--small);
    }
  }


  @media screen and (min-width: 650px) {
    background-image: url('https://images.unsplash.com/photo-1529772942463-35a62ea332b8?crop=face&cs=tinysrgb&fit=crop&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0Mzc5MzU2Mw&ixlib=rb-1.2.1&q=80&h=1100&w=1100');
    
    &__title {
      max-width: 40%;
    }
  }

  @media screen and (min-width: 1110px) {
    background-image: url('https://images.unsplash.com/photo-1529772942463-35a62ea332b8?crop=face&cs=tinysrgb&fit=crop&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0Mzc5MzU2Mw&ixlib=rb-1.2.1&q=80w=1400');
  }
}

.text-wrap {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--spacing);
}

.btt-button {
  position: fixed;
  right: 1rem;
  bottom: -5rem;
  z-index: 20;
  
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: var(--clr-primary);
  transition: bottom 250ms ease, border-radius 250ms ease;
  box-shadow: 0 0.5rem 1rem rgba(28, 25, 23, .2), 0 1px rgba(28, 25, 23, 0.3);

  display: flex;
  justify-content: center;
  align-items: center;

  svg {
    display: block;
    fill: var(--clr-bg);
  }

  &.is-visible {
    bottom: 1rem;
  }
}

.footer {
  border-top: 2px solid var(--clr-line);
  margin-top: var(--spacing);
  padding-top: var(--spacing);
  font-size: var(--font-size--small);
  color: var(--clr-text--light);
}

const scrollTarget = document.getElementById('scroll-observe-target');
const scrollToTopButton = document.getElementById('scroll-to-top-button');

const callback = (entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting === true) {
      scrollToTopButton.classList.add('is-visible');
    } else {
      scrollToTopButton.classList.remove('is-visible');
    }
  });
}

const options = {
  root: null,
  rootMargin: '0px',
  threshold: 0.2
};

const observer = new IntersectionObserver(callback, options);
observer.observe(scrollTarget);