TIL 06 | JavaScript - Window scrollTo() Method

JavaScript를 이용해 웹 사이트 scrollTo()Method 적용해보기.

<button onclick="topFunction()"id="myBtn" title="Go to top">
Top</button>

HTML에서 버튼을 생성해주고

#myBtn {
  display: none;
  position: fixed;
  bottom: 80px;
  right: 50px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: black;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}
#myBtn:hover {
  background-color: #555;
}

CSS로 버튼에 스타일과 위치를 잡아준다.

let mybutton = document.getElementById("myBtn");

JavaScript로 버튼을 선언해주고

window.onscroll = function() {
	scrollFunction()
};
function scrollFunction() {
	if (document.body.scrollTop > 800 ||
    document.documentElement.scrollTop >800) {
	mybutton.style.display = "block";
} else {
	mybutton.style.display = "none";
	}
}

사용자가 scorll down을 상단으로부터 800px 내려오면 버튼이 노출된다.

function topFunction() {
	document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;

사용자가 버튼을 클릭하면 스크롤이 상단으로 이동한다.