Кнопка плавного скроллинга до верхушки html документа | Smooth scrolling button to the top of the html document
<div id="up-arrow"></div>
</footer>
/**
* @source: https://stackoverflow.com/questions/4817029/whats-the-best-way-to-detect-a-touch-screen-device-using-javascript#answer-4819886
**/
function isTouchDevice() {
return ( ('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0) );
}
// Go Top Button
$(function() {
const $goTop = $('#goTop');
const speedMs = 500;
const showTriggerPx = 350;
if (isTouchDevice()) {
$goTop.addClass('--touch');
}
goTopInitialize();//on load
window.onscroll = function () {
goTopInitialize();
}
function goTopInitialize() {
let scrolled = window.pageYOffset || document.documentElement.scrollTop;
$goTop
.show()
.css('opacity', '.7');
if (scrolled <= showTriggerPx || scrolled === 0) {
$goTop
.hide()
.css('opacity', '0.3');
}
}
$goTop.on('click', function() {
$('html, body').animate(
{
scrollTop: 0
},
speedMs
);
$(this).hide();
return true;
});
});
#up-arrow {
background: #fff url(../img/up-arrow.svg) no-repeat center;
background-size: 60%;
padding: 30px;
position: fixed;
right: 20px;
bottom: 15px;
transition: 400ms;
}
#up-arrow:hover {
transform: scale(1.1);
opacity: 0.9 !important;
cursor: pointer;
}