JSFiddle - React, Tailwind, and code Playground

CSS

#to-the-top {
  display: none;
  position: fixed;
  right: 0px;
  height: 10px;
  width: 100px;
  bottom: 150px;
  top: 854px;
  color: yellow;
}

JavaScript

touchOverFooter = ->
  initialTop = $(window).height() - $('.footer').height() + 170
  footerTop = $('.footer').offset().top - $(window).scrollTop() - 104
  top = Math.min(initialTop, footerTop)

  $('#to-the-top').css('top', top);

switchToTheTopLink = ->
  if $(window).scrollTop() > 0
    $('#to-the-top').css('display', 'inline-block')
  else
    $('#to-the-top').css('display', 'none')

$(window).load ->
  touchOverFooter() if $(window).scrollTop() > 0

$(window).scroll ->
  switchToTheTopLink()
  touchOverFooter() if $(window).scrollTop() > 0

$(document).ready ->
  $(window).resize ->
    switchToTheTopLink()

  $('#to-the-top').on 'click', ->
    $('html, body').animate { scrollTop: 0 }, 'slow'
    false