Module «btn-scroll-up». Кнопка «наверх»

Демо:

https://codepen.io/ildar-meyker/pen/wvOoJKV

Плагины:

https://jquery.com/

https://www.npmjs.com/package/debounce

Подключение:

npm i debounce --save-dev

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Разметка:

<a href="#" class="btn-scroll-up" id="btn-scroll-up">
    Наверх
</a>

Стили:

// blocks/buttons/btn-scroll-up.scss
.btn-scroll-up {
    display: none;
    position: fixed;
    z-index: 999;
    left: 4rem;
    bottom: 4rem;
    cursor: pointer;

    &.active {
        display: flex;
    }
}

Инициализация:

// modules/btn-scroll-up.js
import { debounce } from "debounce";

$("#btn-scroll-up").on("click", function (e) {
    e.preventDefault();

    window.scroll({
        top: 0,
        behavior: "smooth",
    });
});


$(window).on(
	"scroll",
	debounce(function () {
		$("#btn-scroll-up").toggleClass(
			"active",
			$(window).scrollTop() > $(window).height() * 2
		);
	}, 200)
);