JSFiddle - React, Tailwind, and code Playground

by rlemon

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In euismod elit
  lorem. Suspendisse potenti. Phasellus lacus justo, consectetur ac ornare
  eget, varius id massa. Cras commodo, ligula non interdum malesuada, quam
  lectus accumsan erat, sed rhoncus est ipsum a lectus. Nunc semper ligula
  id neque interdum rutrum. Integer gravida feugiat ligula, eget facilisis
  enim gravida ac. Vestibulum congue ullamcorper diam, quis venenatis enim
  aliquam interdum. Mauris at enim lectus, nec blandit lacus. Class aptent
  taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
  Vivamus scelerisque, tortor non tempus malesuada, magna enim elementum
  ante, id molestie orci purus sit amet orci. Etiam vitae mauris mauris,
  ac sodales sapien. Etiam tristique scelerisque arcu, a congue quam interdum
  in. Vivamus in tincidunt odio. In hac habitasse platea dictumst. Curabitur
  gravida sapien sit amet velit hendrerit bibendum. Maecenas sit amet lorem
  in nulla feugiat convallis non id nisi.</p>
<p>Ut iaculis adipiscing massa eget porttitor. Donec rutrum odio eget est
  cursus in sollicitudin eros imperdiet. Praesent fermentum tempus tincidunt.
  Nam dapibus mollis ultricies. Phasellus ornare, nisi eget adipiscing dictum,
  diam dui sagittis ante, nec posuere velit risus a arcu. Ut ultrices fermentum
  condimentum. Suspendisse sit amet volutpat augue. Nullam interdum, arcu
  at aliquam pretium, diam libero dapibus justo, vel placerat leo lacus id
  metus. Vivamus blandit, massa nec volutpat fringilla, eros lectus hendrerit
  lorem, ut porttitor arcu odio gravida nibh. Pellentesque tortor magna,
  sodales sed scelerisque a, convallis commodo libero. Curabitur ut dictum
  nisi. Quisque arcu purus, bibendum quis adipiscing et, condimentum ac felis.
  Proin condimentum lobortis malesuada.</p>
<p>Praesent porta pellentesque felis, at condimentum mauris adipiscing id.
  Vivamus accumsan, nisi sit amet malesuada malesuada, mi est ultrices lacus,
  at...

CSS

p {
  padding: 10px;
  width: 60%;
}

JavaScript

$.mcToppy = function (options) {
  var btn = $('<button></button>'),
    defaults = {
      css: {
        position: 'fixed',
        bottom: '16px',
        right: '16px',
        backgroundColor: '#FFF',
        color: '#444',
        padding: '4px 6px',
        borderRadius: '4px',
        display: 'none'
      },
      text: 'Top',
      speed: 500,
      callback: undefined
    };
  options = options || {};
  options = $.extend({}, defaults, options);
  btn.css(options.css).text(options.text).on('click', handle_click).appendTo('body');
  $(window).on('scroll', handle_scroll);

  function handle_scroll() {
    if ($(this).scrollTop() != 0) {
      btn.fadeIn('fast');
      return;
    }
    btn.fadeOut('fast');
  }

  function handle_click() {
    $('html,body').animate({
      scrollTop: 0
    }, options.speed).promise().done(options.callback);
  }

};
$.mcToppy({
  callback: function () {
    alert('foo');
  }
});