Кнопка плавного скроллинга до верхушки html документа | Smooth scrolling button to the top of the html document

index.html

  <div id="up-arrow"></div>
</footer>

script.js

/**
 * @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;
  });
 
});

style.css

#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;
}

up-arrow.svg