Кнопка toTop чистый javascript без примесей



Кнопка Наверх на простом и чистом JavaScript — ракета

Очередная памятка для себя. Обратил внимание, что jQuery работает в 5 раз примерно медленнее чем чистый js — выводы очевидны — переписываем и меняем весь код на c jQuery на javascript. Скорость сайта критична. Код взят с моего рабочего сайта, достался в наследство.

Ниже код вызова функции для кнопки Наверх

<!--scroll to top -->
<script type="text/javascript">
mybutton = document.getElementById("top");
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}

function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>

Код кнопки

<span onclick="topFunction()" id="top" class="btn btn-success btn-sm px-3 rounded">Вверх</span>

Стили кнопки

#top {
position:fixed;
bottom:120px;
right:32px;
z-index:9999;
cursor:pointer;
display: none;
opacity: 1;
}
#top:hover {
opacity: 1;
-webkit-transition: 0.5s;
}
html {
scroll-behavior: smooth;
}
Рубрика: Wordpress

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *