Display a back to top icon when scrolling

Add this code to your custom CSS:

.back-to-top {
	background: none;
 	margin: 0;
 	position: fixed;
 	bottom: 100px;
 	right: 40px;
 	width: 70px;
 	height: 60px;
 	z-index: 100;
 	display: none;
 	text-decoration: none;
 	color: #ffffff;
 	background-color: #1d458c; 
 	text-align: center;
}
 
.back-to-top i {
  font-size: 60px; 
  color: #ffffff;
}

.back-to-top:hover,
.back-to-top:active,
.back-to-top:focus {
  color: #ffffff;
}

Add this  line to your Custom HTML Body below your template layout merge code

 <a href="#" class="back-to-top"><i class="fa fa-angle-up" aria-hidden="true"></i></a>

Add this script to the bottom of your Custom HTML

<script>
//back to top
$(function(){ 
		var offset = 250; 
		var duration = 300;
		$(window).scroll(function() {
			if ($(this).scrollTop() > offset) {
				$('.back-to-top').fadeIn(duration);
			} else {
				$('.back-to-top').fadeOut(duration);
			}
		});
	   
		$('.back-to-top').click(function(event) {
			event.preventDefault();
			$('html, body').animate({scrollTop: 0}, duration);
			return false;
		});
});
</script>