JSFiddle - React, Tailwind, and code Playground

by holden321

HTML

<div id="btn-top"><a href="#?" title="Наверх страницы"><span>up</span></a></div>
<div id="btn-bottom"><a href="#?" title="Наверх страницы"><span>down</span></a></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et enim bibendum, sollicitudin ante a, pellentesque nibh. Aenean scelerisque risus vel tortor pretium, vel rutrum nisl posuere. Duis convallis elementum cursus. Quisque ac pretium nunc. Cras pulvinar ante eu nulla congue imperdiet. In vitae quam dui. Pellentesque egestas augue nibh, ac rutrum metus suscipit ut. Aliquam et nisl ligula. Donec facilisis feugiat ullamcorper. Mauris a nisi lacinia, porta augue nec, consequat massa. Nullam tristique nulla malesuada est pulvinar sagittis sed a sapien. Pellentesque id ipsum at tellus eleifend lobortis. Proin malesuada non nulla vitae congue. Integer mollis, lacus gravida placerat pharetra, metus enim mattis eros, vitae tincidunt turpis sapien ac nisi. Nunc in libero id dolor cursus tincidunt et non est. Cras vel nunc quis quam aliquam aliquet. Vestibulum blandit, turpis luctus pellentesque bibendum, massa elit luctus nisl, vel pharetra nunc lorem id nisl. In ullamcorper erat in neque lacinia, quis varius erat vestibulum. Aliquam enim enim, luctus ac erat sit amet, luctus molestie dolor. Aenean nulla elit, posuere at nulla non, faucibus pharetra tellus. Maecenas ac venenatis sapien. Sed adipiscing, magna non tincidunt facilisis, neque risus molestie libero, vel lacinia libero nibh eu risus. Morbi nec porttitor lectus. Quisque gravida velit sed tortor porttitor, nec pellentesque eros vehicula. Sed volutpat ante vel nunc sagittis cursus. Praesent condimentum condimentum eleifend. Vestibulum viverra adipiscing semper. Pellentesque ac mauris metus. Vivamus laoreet magna in dolor mattis, quis hendrerit lectus sagittis. Ut adipiscing urna nec ligula lobortis, ut ultricies massa porttitor. In hac habitasse platea dictumst. Morbi volutpat nisl nec sem tincidunt, in sodales lacus fringilla. Morbi et dui...

CSS

#btn-top, #btn-bottom {position:fixed;background:yellow;right:0}
#btn-top {top:111px;}
#btn-bottom {bottom:111px;}

JavaScript

var body=$("body");

if(body.scrollTop() <= 111) $("#btn-top").hide();

$(document).scroll(function () {
    if (body.scrollTop() > 111) $('#btn-top').fadeIn(1108);
    else $('#btn-top').fadeOut(1108);
});
$('#btn-top a').click(function () {
    body.animate({scrollTop: 0}, 888);
    return false;
});
//////////////// Кнопка вниз: ////////////////////////
var bot=1;
if(body.scrollTop() > $(document).height()-111) $("#btn-bottom").hide();

$(document).scroll(function () {
    if (body.scrollTop() > 111) $('#btn-top').fadeIn(1108);
    else $('#btn-top').fadeOut(1108);
});
$('#btn-top a').click(function () {
    body.animate({scrollTop: 0}, 888);
    return false;
});