자바스크립트 TOP 버튼 만들기 jQuery 사용X

2023.08.07

jQuery를 사용하지 않고 JavaScript만을 사용하여 페이지의 가장 처음 부분으로 돌아가는 버튼을 만들도록 하겠습니다.

페이지 내에서 버튼을 눌렀을때 화면을 다시 표시하는 방식이 아닌 오른쪽 스크롤 바가 위로 이동을 하는 형식입니다.

스크롤바 조작은 jQuery를 이용하면 편리하지만 읽어 들이는 시간이 걸리기 때문에 이번에는 JavaScript만을 사용하도록 하겠습니다.

 

HTML 샘플

<button class="scroll-top" id="js-button">
	<i class="fa fa-chevron-up" aria-hidden="true">TOP</i>
</button>

 

버튼이 표시되는 부분을 TOP이라고 지정하였습니다.

표시되는 글자는 사용에 맞게 바꿔도 상관없습니다.

글자대신에 이미지를 사용하여도 괜찮습니다.

 

CSS 샘플

.scroll-top {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 100;
	background-color: #999;
	opacity: .8;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: none;
	color: #fff;
}
.scroll-top:hover {
	cursor: pointer;
}

 

HTML에서 작성한 버튼의 위치를 설정하는 CSS입니다.

색상과 크기도 설정하고 있습니다.

사용에 맞게 변경하여도 괜찮습니다.

 

JavaScript 샘플

scrollTop('js-button', 500);
function scrollTop(elem,duration) {
	let target = document.getElementById(elem);

	target.addEventListener('click', function() {
		let currentY = window.pageYOffset; 
		let step = duration/currentY > 1 ? 10 : 100;
		let timeStep = duration/currentY * step;
		let intervalID = setInterval(scrollUp, timeStep);

		function scrollUp(){
			currentY = window.pageYOffset;
			if(currentY === 0) {
				clearInterval(intervalID);
			} else {
				scrollBy( 0, -step );
			}
		}
	});
}

 

JavaScript 설명

scrollTop('js-button', 500);

 

첫 번째 파라미터에는 id명을 지정합니다.

두번째 파라미터에는 화면 제일 윗부분까지 도착하는 시간을 지정합니다.

500ms으로 지정했기 때문에 버튼을 눌렀을 경우 화면의 제일 처음 부분까지 0.5초에 걸쳐 이동하게 됩니다.

let target = document.getElementById(elem);

 

현재 표시되어있는 스크롤양을 취득합니다.

let step = duration/currentY > 1 ? 10 : 100;

 

변수 step은 한번에 움직이는 스크롤양입니다.

시간에 비해 거리가 짧은 경우에는 10px씩 스크롤을 움직입니다.

거리가 길 경우에는 100px씩 스크롤을 움직입니다.

1px씩 스크롤을 움직이게 지정하면 여러가지 문제로 인해 동작을 안하기 때문에 10px 또는 100px씩 스크롤이 움직이게 지정합니다.

이것으로 jQuery를 사용하지 않고 JavaScript를 사용하여 TOP으로 돌아가는 버튼을 만들어보았습니다.

하나의 HTML파일에 TOP버튼, CSS, JavaScript를 작성한 샘플입니다.

확장자가 html인 파일에 복사하여 사용하면 됩니다.

 

 

TOP버튼 테스트 샘플

<html>
<HEAD>
<style>
.scroll-top {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 100;
	background-color: #999;
	opacity: .8;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: none;
	color: #fff;
}
.scroll-top:hover {
	cursor: pointer;
}
</style>
</HEAD>

<body>
    <button class="scroll-top" id="js-button">
    <i class="fa fa-chevron-up" aria-hidden="true">TOP</i>
</button>

<p>1</br></p><p>2</br></p><p>3</br></p><p>4</br></p><p>5</br></p><p>6</br></p><p>7</br></p><p>8</br></p><p>9</br></p><p>10</br></p>
<p>11</br></p><p>12</br></p><p>13</br></p><p>14</br></p><p>15</br></p><p>16</br></p><p>17</br></p><p>18</br></p><p>19</br></p><p>20</br></p>
<p>21</br></p><p>22</br></p><p>23</br></p><p>24</br></p><p>25</br></p>


<script type="text/javascript">
scrollTop('js-button', 500);
function scrollTop(elem,duration) {
    let target = document.getElementById(elem);

    target.addEventListener('click', function() {
        let currentY = window.pageYOffset; 
        let step = duration/currentY > 1 ? 10 : 100;
        let timeStep = duration/currentY * step;
        let intervalID = setInterval(scrollUp, timeStep);

        function scrollUp(){
            currentY = window.pageYOffset;
            if(currentY === 0) {
                clearInterval(intervalID);
            } else {
                scrollBy( 0, -step );
            }
        }
    });
}
</script>
</body>
</html>

댓글