JSFiddle - React, Tailwind, and code Playground

by Alexander Startsev

HTML

<a href="#" id="scrollone" class="scroll">Scroll (1000 ms)</a>
<a href="#" id="scrolltwo" class="scroll scroll-two">Scroll (3000 ms)</a>

CSS

html{
    height: 300%;
    background: #FFF;
}

.scroll{
    position: fixed;
    bottom: 10px;
    left: 10px;
    cursor: pointer;
    font: 300 14px/18px Arial, sans-serif;
    color: #000;
}

.scroll:hover{
    color: #F00;
}

.scroll.scroll-two{
    bottom: 30px !important;
}

JavaScript

$(function(){$.fn.scrollToTop=function(speed){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},speed)})}});

$(function(){
    $('#scrollone').scrollToTop(1000);
    $('#scrolltwo').scrollToTop(3000);
});