Home / Archive / Back to Top Button (copy)
Duplicate Snippet

Embed Snippet on Your Site

Back to Top Button (copy)

Add a simple button to scroll back to top on the frontend.

Code Preview
html
<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>

Comments

Add a Comment