TIL 06 | JavaScript - Window scrollTo() Method
2090 단어 JavaScriptTILJavaScript
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;
사용자가 버튼을 클릭하면 스크롤이 상단으로 이동한다.
Author And Source
이 문제에 관하여(TIL 06 | JavaScript - Window scrollTo() Method), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@soojk/TIL-06저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)