scroll-progress-back-to-top

Summary

Right-edge vertical scroll indicator paired with a small "Scroll to top" floating text link. Both fade in only after the user has scrolled past a threshold.

HTML structure (minimal)

<div class="float-text show-on-scroll">
  <span><a href="#">Scroll to top</a></span>
</div>
<div class="scrollbar-v show-on-scroll"></div>

Key SCSS tokens

.float-text {
  position: fixed;
  right: 30px; bottom: 80px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 12px; font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  z-index: 50;
  opacity: 0;
  transition: opacity .3s ease;
}
.scrollbar-v {
  position: fixed;
  right: 30px; bottom: 30px;
  width: 2px; height: 40px;
  background: rgba(0,0,0,.1);
  z-index: 50;
  opacity: 0;
  transition: opacity .3s ease;
}
.scrollbar-v::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 0;
  background: var(--primary-color);
  transition: height .1s linear;
}
.show-on-scroll.is-visible { opacity: 1; }

Animation logic

// Show / hide indicator past threshold + update progress bar
$(window).on('scroll', function () {
  const top = $(this).scrollTop();
  const docHeight = $(document).height() - $(this).height();
  const pct = Math.min(top / docHeight, 1);

  $('.show-on-scroll').toggleClass('is-visible', top > 300);
  $('.scrollbar-v').css('--progress', (pct * 100) + '%');
  // CSS::after height is driven via the --progress var on a real install
});

$('.float-text a').on('click', function (e) {
  e.preventDefault();
  $('html, body').animate({ scrollTop: 0 }, 600);
});

Notable details

• The "Scroll to top" link uses writing-mode: vertical-rl plus transform: rotate(180deg) to read bottom-up, matching the visual axis of the scroll bar.
• The bar itself is two divs: .scrollbar-v is the track, its ::after pseudo-element is the fill — fill height animates as a CSS custom property.
• Both pieces share .show-on-scroll and .is-visible classes, so a single jQuery toggle controls both.

Use when

• Long-scroll editorial pages where the reader benefits from seeing how far through they are.
• Templates that already use a fixed transparent header — this gives the page a second "where am I" affordance without crowding the navbar.

Caveats

• writing-mode rotation can confuse some screen readers — give the link an aria-label="Back to top".
• The element is fixed-positioned at 30px from the right edge — verify it doesn't overlap right-side scroll-style chats or cookie banners.