Демо:
https://codepen.io/ildar-meyker/pen/wvOoJKV
Плагины:
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)
);
0 комментариев