웹사이트의 페이지가 길어질경우 사용자는 마우스 스크롤을 여러 번 해야만 페이지 상단으로 올라갈 수 있다.
그래서 굉장히 번거러울수 있는데 스크롤 이동 버튼을 페이지 하단에 만들어 놓으면 사용자는 클릭 한 번으로 페이지 상단으로 이동가능하게 된다.
javascript를 이용한 top 버튼 예제
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>top move button</title>
<style>
#topBtn {
display: none;
position: fixed;
bottom: 30px;
right: 30px;
width: 45px;
height: 45px;
background: #111;
outline: none;
border: none;
border-radius: 23px;
opacity: .4;
cursor: pointer;
z-index: 99;
}
#topBtn::after {
content: '';
display: inline-block;
position: absolute;
top: 19px;
left: 16px;
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
padding: 5px;
border: solid #fff;
border-width: 0 3px 3px 0;
}
</style>
</head>
<body>
<h1>Top 이동 버튼</h1>
<div style="height: 1000px;background-color: antiquewhite;"></div>
<button onclick="topMove()" id="topBtn" title="Go to top"><span class="blind">Top</span></button>
<script>
let topBtn = document.getElementById("topBtn");
function scrollFunctionFooter() {
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
topBtn.style.display = "block";
} else {
topBtn.style.display = "none";
}
}
window.onscroll = function() {scrollFunctionFooter()};
function topMove() {
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}
</script>
</body>
</html>
Jquery를 이용한 top 버튼 예제
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
let topBtn = $('#topBtn')
$(window).scroll(function(){
if ($(this).scrollTop() > 100){
topBtn.show();
} else{
topBtn.hide();
}
})
function topMove() {
$('html, body').animate({scrollTop:0},400);
}