$color: #254568;
$main-width: 50rem;

$scrollLength: 100vh;

* {
  box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

main {
  padding: 0 3rem;

  position: relative;
  max-width: $main-width;
  margin: 2rem auto;

  *:last-child {
    margin-bottom: 0;
  }
}

.back-to-top-wrapper {

  top: $scrollLength;
  right: 0.25rem;
  bottom: -5em;
  width: 3em;
  pointer-events: ;
	    display: inline-block;
    width: 60px;
    height: 60px;
    background-size: auto 58px;
    background-image: url(images/icons/top.png);
    background-repeat: no-repeat;
    position: fixed;
    bottom: 25px;
    right: 50px;
    z-index: 1000;
	background-color: #ffffff;
    border-radius: 40px;
    border: 1px solid #3333;
	opacity: 0.2; 
}

.back-to-top-link {
    display: block;
    width: 60px;
    height: 60px;
    background-size: auto 58px;
    background-image: url(images/icons/top.png);
    background-repeat: no-repeat;
    position: fixed;
    bottom: 25px;
    right: 50px;
    z-index: 1;
	background-color: #ffffff;
    border-radius: 40px;
    border: 1px solid #3333;
	opacity: 0.2; 

  position: sticky;
  pointer-events: all;
  top: calc(100vh - 5rem);

  background-color: scale-color($color, $lightness: 85%);
  transition: transform 80ms ease-in;

  &:hover,
  &:focus {
    transform: scale(1.1);
  }

  &:focus {
    outline: none;
    box-shadow: 0 0 0 3px scale-color($color, $lightness: 35%);
  }
}


View Compiled
Run Pen


Resources1× 0.5× 0.25×Rerun