How Do I ... create a 'Back to Top' scroll jump

The VT Ready site implemented the use of a 'Top' button in 2020. To achieve the same look and functionality, add the following code snippet to an HTML component in a page footer.

In your page's footer, add an HTML component
Copy the code below
Paste the code into the HTML component

Guidelines

Before you decide to implement the Back to Top functionality, consider your use case and determine if this would be appropriate for your content. Consider using a Back to Top button for pages that feel too long; longer than 5-7 screens lengths of scrolling for your body content. For relatively short page lengths, Back to Top links may be overkill when users can simply scroll back up without too much effort.


<style>

  /**************** BACK TO TOP BUTTON */
  .vt-backToTop-wrapper {
    display: none;
  }

  @media screen and (min-width: 768px) {
    .vt-backToTop-wrapper {
      display: block;
      position: fixed;
      width: 100px;
      height: 61px;
      z-index: 100;
      right: 0;
      top: 90vh;
    }
  }

  @media screen and (min-width: 768px) and (-ms-high-contrast: active) {
    .vt-backToTop-wrapper {
      background: url(/global_assets/templates/magazine/images/back-to-top-black.jpg) 0 0 no-repeat;
    }
  }

  @media screen and (min-width: 768px) and (-ms-high-contrast: black-on-white) {
    .vt-backToTop-wrapper {
      background: url(/global_assets/templates/magazine/images/back-to-top-white.jpg) 0 0 no-repeat;
    }
  }

  @media screen and (min-width: 768px) and (-ms-high-contrast: white-on-black) {
    .vt-backToTop-wrapper {
      background: url(/global_assets/templates/magazine/images/back-to-top-black.jpg) 0 0 no-repeat;
    }
  }

  @media screen and (min-width: 768px) {
    .vt-backToTop-button {
      display: block;
      width: 100px;
      height: 61px;
      background: url(/global_assets/templates/magazine/images/back-to-top.png) 0 0 no-repeat;
      text-indent: -999999px;
      border: none;
    }
  }

  @media screen and (min-width: 768px) and (-ms-high-contrast: active) {
    .vt-backToTop-button {
      background: transparent;
    }
  }

  @media screen and (min-width: 768px) and (-ms-high-contrast: black-on-white) {
    .vt-backToTop-button {
      background: transparent;
    }
  }

  @media screen and (min-width: 768px) and (-ms-high-contrast: white-on-black) {
    .vt-backToTop-button {
      background: transparent;
    }
  }

  /************************************************************************* BACK TO TOP BUTTON */

</style>


<script>

function backToTop() {
$('html,body').animate({
  "scrollTop": 0
});
}

$(document).ready(function() {
  if (window.innerWidth > 768 ) {
    //insert back to top on pages with body class
    if ( $('.vt-backToTop').length < 1 ) {
      $('.vt-bodycol-content').append('<span class="vt-backToTop-wrapper"><button class="vt-backToTop-button" onclick="javascript:backToTop();">Back to top');
    }
  }
});

$(window).on('load', function() {
  if (window.innerWidth > 768 ) {
    // BACK TO TOP EVENT LISTENER
    /*
    $('.vt-backToTop-button').click(function(){
      $('html,body').animate({
        "scrollTop": 0
      });
    });
    */

    // on nav open/search open/UA open hide/show back to top
    $('.vt-nav-toggle, .vt-search-toggle, .vt-access-toggle').click(function() {
      if ( $(".vt-access-toggle").attr("aria-hidden") != "true" || $( "#vt_header_search_form" ).is( ":hidden" ) || $(".vt-nav-toggle").attr("aria-expanded") === "false" ) {
        $(".vt-backToTop-wrapper").show();
      } else {
        $(".vt-backToTop-wrapper").hide();
      }
    });
  }
});

$(document).scroll(function() {
  if (window.innerWidth > 768 ) {
    var backToTopHeight = $(".vt-backToTop-wrapper").height();
    var bodyBottom = $('footer').offset().top;
    var newTop = $(document).scrollTop() + (window.innerHeight * 0.9);

    if ( newTop + backToTopHeight >= bodyBottom ) {
      newTop = bodyBottom - backToTopHeight;
      $('.vt-backToTop-wrapper').offset({ top: newTop});
    } else {
      $('.vt-backToTop-wrapper').offset({ top: newTop});
    }
  }
});

$(window).resize(function() {
  if (window.innerWidth > 768 ) {
    //insert back to top on pages with body class
    if ( $('.vt-backToTop').length < 1 ) {
      $('.vt-bodycol-content').append('<span class="vt-backToTop-wrapper"><button class="vt-backToTop-button" onclick="javascript:backToTop();">Back to top');
    }
  } else {
    $('.vt-backToTop-wrapper').remove();
  }
});

</script>