Een go to top pijl rechtsonder in de pagina die pas verschijnt na 160px scrollen. In combinatie met een menu dat verdwijnt met naar beneden scrollen maar meteen terugkomt bij terug omhoog scrollen. En het hamburgermenu.

(plaats in footer of widget in footer)

<button onclick="topFunction()" id="back-top" title="Go to top"><i class="fa fa-arrow-circle-up"></i></button>

/* CSS go to top button: */
#back-top {
    position: fixed;
    bottom: 10px;
    right: 20px;
    z-index: 99999;

}
.fa-arrow-circle-up {
    font-size: 3em !important;
    color: #084B8A;
        text-shadow: #fff 0px 0px 30px;
}
.fa-arrow-circle-up:hover {
        color:#c6851f;
}

<nav id="menu" class="container-fluid row">
	<a href="javascript:void(0)" class="openbtn"  onclick="openNav()"><i class="fa fa-navicon"></i></a>
	<div id="menu-mobile">
		<a href="javascript:void(0)" class="closebtn"  onclick="closeNav()"><i class="fa fa-times"></i></a>
		<div class="menu-hoofdmenu-container">
		  <ul id="menu-hoofdmenu" class="menu">
		    <li id="menu-item-1" class="menu-item">
		    <a href="https://portfolio.ceciliaverhaar.nl/.../" itemprop="url">Naam link1</a>
		    </li>
		    <li id="menu-item-2" class="menu-item">
		    <a href="https://portfolio.ceciliaverhaar.nl/.../" itemprop="url">Naam link2</a>
		    </li>
		  </ul>
		</div>	
		<div id="search" class="">
		  <form role="search" method="get" class="search-form" 
			action="https://portfolio.ceciliaverhaar.nl/">
			  <label>
				<span class="screen-reader-text">Zoeken naar:</span>
				<input type="search" class="search-field" 
				placeholder="Zoeken &hellip;" value="" name="s" />
			  </label>
			<input type="submit" class="search-submit" value="Zoeken" />
		  </form>
		</div>
  	</div>
</nav>

/* HAMBURGERMENU Small devices have a width between 576 to 767 pixels */
@media only screen and (min-width:768px) {
        #menu-mobile {
            	display:flex;
            	flex-flow: row nowrap;
            	justify-content: center;
        	width: 100%;
        	background-color: transparent;
            	margin-top:0px;
        }
        .closebtn {display:none}
     	.menu > ul {
        	display:flex;
        	flex-flow:row wrap;
        }
        .fa-navicon {display:none}
}

@media only screen and (max-width:767px) {
	#menu-open {display:none;}
	.fa-navicon {               
		padding: 5px; 
        	display: flex;
        	align-items: baseline;
        	margin: 0 auto;
        	font-size: 1.5em !important;
        	color: #fff;
        }
        #menu { background-color:#444}         
	 #menu-mobile {             
		display: none;               
		flex-flow: column wrap; 
       		width: 100%;        	
		background-color: #444;           	
		margin-top:-30px;        
	}
        .fa-times {
             	padding: 5px;
        	display: flex;
        	align-items: baseline;
        	margin: 0 auto;
        	font-size: 1.5em !important;
        	color: #fff;
        }
        .menu-hoofdmenu-container { width:100vw; margin-top:40px}
        #menu-hoofdmenu {
        	width: 90%;
        	background-color: #444;
              	margin-top:-30px;
        }
}

hamburgermenu bij kleinere resolutie, verdwijnen/verschijnen nav-balk on scroll en verschijnen go to top button on scroll

<script>
// Hamburgermenu
    function openNav() {
        document.getElementById("menu-mobile").style.display = "flex" 
    }
    function closeNav() {
        document.getElementById("menu-mobile").style.display = "none" 
}

// 2 functions called in window.onscroll  
window.onscroll = function () { scrollFunctionTop(); hideFunction() };

// When the user scrolls down 100px from the top of the document, show the button
function scrollFunctionTop() {
    if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
        document.getElementById("back-top").style.display = "block";
    } else {
        document.getElementById("back-top").style.display = "none";
    }
}
  // When the user clicks on the button, scroll to the top of the document
function topFunction() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
}

/* When the user scrolls down, hide the navbar. When the user scrolls up, show the navbar */
var prevScrollpos = window.pageYOffset;
function hideFunction() {
    var currentScrollPos = window.pageYOffset;
    if (prevScrollpos > currentScrollPos) {
        document.getElementById("header").style.top = "0";
    } else {
        document.getElementById("header").style.top = "-160px";
    }
    prevScrollpos = currentScrollPos;
} 
</script>