탑버튼 만들기

.quick .go-top {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto 12px;
    width: 56px;
    height: 56px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3em;
    letter-spacing: 0;
    background: #242424;
    border-radius: 100%;
}

.quick .go-top:before {
    content: "";
    width: 0;
    height: 0;
    margin: 0 0 4px 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 8px solid #fff;
}

footer.php

<a href="javascript:void(0)" class="scroll-top">
        <div class="go-top">TOP</div>
    </a>

css

.scroll-top { position: fixed; opacity: 0; bottom: 50px; right: 20px; pointer-events: none; } 
.go-top { position:relative; display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 0 auto 12px; width: 56px; height: 56px; color: #fff; font-size: 14px; font-weight: 500; line-height: 1.3em; letter-spacing: 0; background: #242424; border-radius: 100%; } 
.go-top:before { content: ""; width: 0; height: 0; margin: 0 0 4px 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 8px solid #fff; } 
.scroll-top.active { opacity: 1; pointer-events: auto; } 

script

 // top
	$('.scroll-top').click(function(e) {
		e.preventDefault();
		$('html, body').animate({scrollTop: 0}, 800,'easeInOutQuint');
		return false
	});

참고사이트
금빛여성의원

완성사이트
퍼블랩