Create a sticky header and a footer that moves from the bottom to the top using HTML, CSS, and JavaScript.

gistfile1.txt

<a id="sctop">
        <span> <svg enable-background="new 0 0 32 32"  id="Слой_1" version="1.1" viewBox="0 0 32 32"  xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path clip-rule="evenodd" d="M26.704,10.192l-9.999-9.899  c-0.397-0.393-1.03-0.378-1.428,0l-9.999,9.9c-0.394,0.391-0.394,1.024,0,1.414c0.395,0.391,1.034,0.391,1.429,0l8.275-8.192V31  c0,0.552,0.452,1,1.01,1s1.01-0.448,1.01-1V3.414l8.275,8.192c0.394,0.391,1.034,0.391,1.428,0  C27.099,11.216,27.099,10.583,26.704,10.192z" fill="#121313" fill-rule="evenodd" id="Arrow_Upward"/><g/><g/><g/><g/><g/><g/></svg></span>
</a>

<script> 
  //this for header sticky
	jQuery(document).ready(function($) {
	$(window).on('scroll', function (){
		var sticky = $('.scheader'),
		  scroll = $(window).scrollTop();
		  if (scroll >= 300) sticky.addClass('sticky');
		  else sticky.removeClass('sticky');
	});
  });
	
	//this for arrow click - bottom to top
	jQuery(document).ready(function($) {
		$(window).scroll(function() {
			var height = $(window).scrollTop();
			if (height > 300) {
				$('#sctop').fadeIn();
			} else {
				$('#sctop').fadeOut();
			}
		}); 
		$("#sctop").click(function(event) {
			event.preventDefault();
		  $("html, body").animate({ scrollTop: 0 }, "slow");
			return false;
		});
	});
  
</script>

<style>

/* this for header fixed */
.scheader { 
	width: 100%;
	-webkit-transition: all 0.3s ease-out 0s;
	-moz-transition: all 0.3s ease-out 0s;
	-ms-transition: all 0.3s ease-out 0s;
	-o-transition: all 0.3s ease-out 0s;
	transition: all 0.3s ease-out 0s; 
}

.sticky {
	height: auto;
	background-color: #fff !important;
	position: fixed !important;
	box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.1);
	-webkit-transition: all 0.3s ease-out 0s;
	-moz-transition: all 0.3s ease-out 0s;
	-ms-transition: all 0.3s ease-out 0s;
	-o-transition: all 0.3s ease-out 0s;
	transition: all 0.3s ease-out 0s; 
	top: 0 !important ; 
	animation: headerSlideDown 0.95s ease forwards;
}

 
@keyframes headerSlideDown {
	0% {
		margin-top: -100px;
	}
	100% {
		margin-top: 0;
	}
}
/*footer arrow bottom to top*/
#sctop {
    color: #cdcdcd;
    height: auto;
    position: fixed;
    bottom: 100px;
    margin: 0;
    z-index: 99999;
    -webkit-transition: all .3s ease 0s;
    -moz-transition: all .3s ease 0s;
    -o-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
	cursor:pointer;
    right: 25px; 
}
#sctop span svg {
    width: 22px;
    text-align: center;
    position: relative;
    top: 4px;
}
#sctop span{ 
	width: 52px;
    height: 52px;
    line-height: 52px;
    text-decoration: none;
    -o-border-radius: 52px;
    -moz-border-radius: 52px;
    -webkit-border-radius: 52px;
    border-radius: 52px;
    -webkit-transition: all .2s ease 0s;
    -moz-transition: all .2s ease 0s;
    -o-transition: all .2s ease 0s;
    border: 1px solid #e8e8e8; 
	display:block;
	text-align:center
}
#sctop:hover span {
	background-color:#e8e8e8
	
}
</style>