JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Ăśberschrift</h1>
<p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam, architecto, nihil, eligendi, explicabo deserunt suscipit illum est voluptates neque repellat maiores quo aliquam magni a dolor laborum accusamus minus fuga ab veniam impedit quis minima modi sint perspiciatis ex corporis! Consectetur quaerat incidunt ut in quae. Atque, dolorem autem commodi quibusdam libero aut reprehenderit. Modi perferendis est sapiente alias! Illo quo eaque eius quas architecto dolorum. At, odit, ducimus inventore deleniti consectetur dolorum minima modi enim repellendus voluptatibus dolorem est. Facilis aperiam minima autem non similique quod quaerat laudantium earum vero consequatur. Commodi, odio, exercitationem, voluptatum saepe itaque nemo vero soluta id necessitatibus nam corrupti amet libero aliquid praesentium totam dolor magnam consequuntur quos veritatis repellendus harum reiciendis voluptatibus corporis! Perspiciatis, accusamus voluptatibus perferendis iusto ducimus. Natus, sit, molestias libero odio dolore modi nesciunt dolorum magni veritatis possimus fugit corporis at ducimus sunt repudiandae! Velit, non, tempora, nemo et porro sed sapiente magnam rem recusandae optio eos illo nostrum eius ipsum aliquam cumque quidem nulla dolorum unde debitis deserunt ipsam labore voluptatem aut culpa consequatur hic reprehenderit nam facere sint. Aliquam, perferendis, nobis modi consectetur dignissimos nisi placeat optio aut incidunt fugit eos explicabo rerum molestiae culpa voluptas quaerat laboriosam.
</p>
<p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, dignissimos, quam, minima facere nobis earum aliquid nihil eligendi sunt eveniet vel inventore cum esse impedit atque perferendis necessitatibus? Ut nemo accusantium beatae odit mollitia ex cum ipsam sapiente quis sunt! Unde saepe ducimus incidunt rem magnam aliquid iure quae sequi animi laboriosam. Quidem, soluta nemo a blanditiis repellat. Ullam pariatur sit...

CSS

*{margin:0px;padding:10px;font-family:"Calibri", sans-serif}

#fhw-scroller svg{
    z-index:1000;
    position:fixed;
    bottom:10px;
    right:10px;
    cursor:pointer;
    margin:0;
    padding:0;
    display:none;
    transition: opacity .5s ease-in-out;
}

.scrolltop{
    transition: 1s ease-in-out;
}

.hintergrund{fill:#f00;}
.linienfarbe {stroke:#fff;stroke-width:18;stroke-linecap:round;}

JavaScript

/**
 * PHP.de
 *
 * http://www.php.de/javascript-ajax-und-mehr/113374-wie-kann-ich-den-sprung-im-scrollbalken-verhindern.html#post835145
 */


var body, fhwScroller;

fhwScroller = document.querySelector("#fhw-scroller svg");

body = document.querySelector("body");

window.onscroll = function() {
    if (this.pageYOffset > 300) {
        fhwScroller.style.opacity = "0.5";
        return fhwScroller.style.display = "block";
    } else {
        return fhwScroller.style.display = "none";
    }
};

fhwScroller.onmouseover = function() {
    return fhwScroller.style.opacity = "1";
};

fhwScroller.onmouseout = function() {
    return fhwScroller.style.opacity = "0.5";
};

fhwScroller.onclick = function () {
            
            body.style.overflow = "hidden";            
          
         };

         body.addEventListener("transitionend", (function (_this) {
            return function (event) {
               if ( event.target === body ) {

                  body.style.overflow = "auto";   

               }
            };
};

body.addEventListener("transitionend", (function(_this) {
    return function(event) {
        if (event.target === body) {
            body.classList.remove("scrolltop");
            body.style.marginTop = "0px";
            return window.scrollTo(0, 0);
        }
    };
})(this));