Back to Top Button

<style>

	#back-to-top {

		display: none;

		position: fixed;

		bottom: 20px;

		right: 20px;

		background-color: rgba(0, 0, 0, 0.7);

		color: #fff;

		width: 40px;

		height: 40px;

		text-align: center;

		border-radius: 5px;

		line-height: 40px;

		cursor: pointer;

		transition: display 0.3s ease, background-color 300ms ease;

		border: none;

		padding: 0;

	}

	#back-to-top:hover {

		background-color: rgba(0, 0, 0, 1);

	}

</style>

<button id="back-to-top">▲</button>

<script>

	var backToTop = document.getElementById( 'back-to-top' );

	window.addEventListener( 'scroll', function () {

		if ( document.body.scrollTop > 20 || document.documentElement.scrollTop > 20 ) {

			backToTop.style.display = 'block';

		} else {

			backToTop.style.display = 'none';

		}

	} );

	backToTop.addEventListener( 'click', function ( e ) {

		e.preventDefault();

		window.scrollTo( {top: 0, behavior: 'smooth'} );

	} );

</script>