JSFiddle - React, Tailwind, and code Playground

by Mr_Vasu

HTML

<div class="mainwrapper">
   have now added a Digital Font to the Clock. You do not have to download the digital font on your machine. All you have to do is add the Google Font CDN inside the section of your web page. The font I am using in the demo is Orbitron. have now added a Digital Font to the Clock. You do not have to download the digital font on your machine. All you have to do is add the Google Font CDN inside the section of your web page. The font I am using in the demo is Orbitron. have now added a Digital Font to the Clock. You do not have to download the digital font on your machine. All you have to do is add the Google Font CDN inside the section of your web page. The font I am using in the demo is Orbitron. have now added a Digital Font to the Clock. You do not have to download the digital font on your machine. All you have to do is add the Google Font CDN inside the section of your web page. The font I am using in the demo is Orbitron. have now added a Digital Font to the Clock. You do not have to download the digital font on your machine. All you have to do is add the Google Font CDN inside the section of your web page. The font I am using in the demo is Orbitron. have now added a Digital Font to the Clock. You do not have to download the digital font on your machine. All you have to do is add the Google Font CDN inside the section of your web page. The font I am using in the demo is Orbitron. have now added a Digital Font to the Clock. You do not have to download the digital font on your machine. All you have to do is add the Google Font CDN inside the section of your web page. The font I am using in the demo is Orbitron. have now added a Digital Font to the Clock. You do not have to download the digital font on your machine. All you have to do is add the Google Font CDN inside the section of your web page. The font I am using in the demo is Orbitron. have now added a Digital Font to the Clock. You do not have to download the digital font on your...

SCSS

.mainwrapper{
    height:2000px;
    width:100%;
    background:orange;
    .TouchMe{
        position: fixed;
        bottom: 30px;
        right: 0px;
        text-align:center;
        visibility:hidden;
        span{
            background:#fff;
        width:50px;
            margin:0 auto;
            padding:10px 10px;
           
        }
    }
  }

JavaScript

function runScroll() {
  scrollTo(document.body, 10, 800);
}
var scrollme;
scrollme = document.querySelector("#scrollme");
scrollme.addEventListener("click",runScroll,false)

    window.onscroll = function(){
         if(window.pageYOffset>200){
         scrollme.style.visibility = "visible";
         }
        else{
        scrollme.style.visibility = "hidden";
        }
    };
function scrollTo(element, to, duration) {
  if (duration <= 20) return;
  var difference = to - element.scrollTop;
  var perTick = difference / duration * 10;

  setTimeout(function() {
    element.scrollTop = element.scrollTop + perTick;
    if (element.scrollTop == to) return;
    scrollTo(element, to, duration - 10);
  }, 10);
}