Botón Back to Top

· Cómo hacer un Botón Back To Top· 

· Inyectar el botón en el footer de tu página ·

Hay que crear un Code Block en el footer e insertar el siguiente código

<a href="#0" class="back-to-top">Top</a>

· El CSS ·

En Design -> Custom CSS no sólo se puede añadir CSS, sino código LESS, un preprocesador muy potente, que luego compila a CSS. Nos permite usar variables y funciones complejas.

En fin, añadir el siguiente código:

Se puede cambiar el color del botón simplemente añadiendo otro código de color en la variable @backToTopColor y jugar también con el tamaño y la transición.

// Back to Top
@backToTopColor: #e86256;
@backToTopSize: 20px;
@backToTopTransition: 300ms;

.back-to-top {
  display: inline-block;
  height: @backToTopSize * 2; width: @backToTopSize * 2;

  position: fixed;
  bottom: @backToTopSize * 2;
  right: @backToTopSize / 2;

  box-shadow: 0 0 @backToTopSize/2 rgba(0, 0, 0, .05);

  /* image replacement properties */
  overflow: hidden; 
  text-indent: 100%;
  white-space: nowrap;

  background: fadeout(@backToTopColor, 20%) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAAuklEQVQ4jc3SvWoCQRTF8SUGVMj6BG4K30BtJIJPbfzoRG19AU2TJt0KKtj+UugSmV3NIgie8p7/uTN37kTRUwuvqNwbruETQ1TvCY/8aYRa2XAdE3mNUf8v/IZZQTjT9GqTgmvDET9BLT8OYiwCcI8+3vEVeHPEWbiBZQDs8HFxQFLQZIlG5LSqSx0wKBixhe+AHUboIj0XUnRuPHKCzZndopsZHazRvrmmE9vECr3QKP3b8FKWfbx+AU+QbAqooqjEAAAAAElFTkSuQmCC) no-repeat center 50%;

  visibility: hidden;
  opacity: 0;

  transition: opacity @backToTopTransition 0s, visibility 0s @backToTopTransition;

  &.is-visible, &.fade-out, .no-touch &:hover { transition: opacity @backToTopTransition 0s, visibility 0s 0s; }

  &.is-visible { /* the button becomes visible */
    visibility: visible;
    opacity: 1;
  }
  /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
  &.fade-out { opacity: .5; }

  .no-touch &:hover {
    background-color: @backToTopColor;
    opacity: 1;
  }

  @media only screen and (min-width: 768px) {
    right: @backToTopSize;
    bottom: @backToTopSize;
  } 
  @media only screen and (min-width: 1024px) {
    height: @backToTopSize * 3;
    width: @backToTopSize * 3;
    right: @backToTopSize * 3 / 2;
    bottom: @backToTopSize * 3 / 2;
  }
}
 

 

· Añadir el JavaScript ·

En Settings -> Advanced -> Code Injection podemos inyectar JavaScript en el Footer o Header de la página. JavaScript es un lenguaje que bloquea el compilado: hasta que no se interpreta no se lee lo que viene más adelante, así que conviene inyectar código en el Footer. De esta manera el documento se lee normalmente y no impedimos la compilación.

Inyectar el siguiente código:

Se puede jugar con los tipos de scroll cambiando la opción 'easing'

<script>
function scrollIt(element, duration = 200, easing = 'easeInQuad', callback) {
  // define timing functions
  const easings = {
    linear(t) { return t; },
    easeInQuad(t) { return t * t; },
    easeOutQuad(t) { return t * (2 - t); },
    easeInOutQuad(t) { return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t; },
    easeInCubic(t) { return t * t * t; },
    easeOutCubic(t) { return (--t) * t * t + 1; },
    easeInOutCubic(t) { return t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1; },
    easeInQuart(t) { return t * t * t * t; },
    easeOutQuart(t) { return 1 - (--t) * t * t * t; },
    easeInOutQuart(t) { return t < 0.5 ? 8 * t * t * t * t : 1 - 8 * (--t) * t * t * t; },
    easeInQuint(t) { return t * t * t * t * t; },
    easeOutQuint(t) { return 1 + (--t) * t * t * t * t; },
    easeInOutQuint(t) { return t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * (--t) * t * t * t * t;  }
  };

  // Returns document.documentElement for Chrome and Safari
  // document.body for rest of the world
  function checkBody() {
    document.documentElement.scrollTop += 1;
    const body = (document.documentElement.scrollTop !== 0) ? document.documentElement : document.body;
    document.documentElement.scrollTop -= 1;
    return body;
  }

  const body = checkBody();
  const start = body.scrollTop;
  const startTime = Date.now();

  // Height checks to prevent requestAnimationFrame from infinitely looping
  // If the function tries to scroll below the visible document area
  // it should only scroll to the bottom of the document
  const documentHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight);
  const windowHeight = window.innerHeight || document.documentElement.clientHeight || document.getElementsByTagName('body')[0].clientHeight;
  const destination = documentHeight - element.offsetTop < windowHeight ? documentHeight - windowHeight : element.offsetTop;

  function scroll() {
    const now = Date.now();
    const time = Math.min(1, ((now - startTime) / duration));
    const timeFunction = easings[easing](time);
    body.scrollTop = (timeFunction * (destination - start)) + start;

    if (body.scrollTop === destination) {
      callback();
      return;
    }
    requestAnimationFrame(scroll);
  }
  scroll();
}

window.onload = () => {
    // browser window scroll (in pixels) after which the "back to top" link is shown
    const offset = 300, offset_opacity = 1200,
        //grab the "back to top" link
        backToTop = document.querySelector('.back-to-top');

    window.onscroll = () => {
        ( window.scrollY > offset ) ? backToTop.classList.add('is-visible') : backToTop.classList.remove('is-visible', 'fade-out');
        
        if( window.scrollY > offset_opacity ) backToTop.classList.add('fade-out');
    }

    backToTop.addEventListener('click', (e) => {
        e.preventDefault();
        scrollIt(document.body)
    })
}
</script>

 

... Et Voilà!

Blitz!