JSFiddle - React, Tailwind, and code Playground

by Сергей Тарасевич

HTML

<div class="box">контент</div>
<a href="/" id="toTo_button_r"><img src="http://softrix.in.ua/templates/MainSoft/images/up.png" alt="" /></a>

<a href="/" id="toTo_button_l"><img src="http://softrix.in.ua/templates/MainSoft/images/up.png"alt="" /></a>

CSS

.box {
    height: 3000px;
    width: 100%;
}
#toTo_button_l, #toTo_button_r {
    width:70px;
    text-align:center;
    padding:5px;
    position:fixed;
    bottom:10px;
    cursor:pointer;
    color:#666;
    text-decoration:none;
}
#toTo_button_l {
    left:12px;
}
#toTo_button_r {
    right:12px;
}

JavaScript

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