Back to the top arrow

<style>
#c-back { position: fixed; display: none; align-items: center; bottom: 60px; right: 20px; width: 40px; height: 40px; cursor: pointer; z-index: 1; opacity: 0.75; background-color: rgba(0,0,0,.75); border-radius: 50%; }
#c-back.visible { display: flex; }
#c-back:hover { background-color: rgba(0,0,0,.9); }
#c-back svg { transform: rotate(-180deg); margin: auto; width: 16px; height: 12px; }
</style>

<script type="text/javascript">
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
$('#c-back').addClass('visible');
} else {
$('#c-back').removeClass('visible');
}
}

$('body').append('<span id="c-back"><svg id="more" viewBox="0 0 12 8" width="100%" height="100%"><path fill="#fff" d="M4.586 6.243L.343 2 1.757.586 6 4.828 10.243.586 11.657 2 6 7.657 4.586 6.243z"></path></svg></span>')
$('#c-back').click(function() {
$('html').animate({ scrollTop: 0 }, 'fast'); return true;
});
</script>