스크롤
// 페이지 높이 설정
<body style="height: 1400px;">HTML
//button에 onclick 이벤트
<button onclick="topFunction()" id="myBtn" title="Go to top">
<svg xmlns="http://www.w3.org/2000/svg" height="30px" width="30px" viewBox="0 0 384 512" fill="white">
<path d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2V448c0 17.7 14.3 32 32 32s32-14.3 32-32V141.2L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z"/>
</svg>
</button>
<h1>Top Button</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente recusandae, officia eveniet minima repellendus beatae, impedit numquam distinctio, cumque repudiandae perferendis!
Esse corporis facere non? Quia, impedit porro. Illum, nostrum!</p>CSS
<style>
#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
border: none;
outline: none;
background-color: black;
color: white;
cursor: pointer;
border-radius: 50%;
width: 50px;
height: 50px;
padding: 0.5rem;
}
#myBtn:hover {
background-color: #555;
}
</style>JS
<script>
// 버튼
let mybutton = document.getElementById("myBtn");
// 스크롤
window.onscroll = function() {scrollFunction()};
// 문서 상단에서 20px 아래로 스크롤
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
// 버튼 표시
mybutton.style.display = "block";
} else {
// 아니면 표시 X
mybutton.style.display = "none";
}
}
// 단추를 클릭하면 문서의 맨 위로 스크롤
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>if... else 문
1. 문법
if (조건식) {
// statement1
} else if(조건식) {
// statement2
} else {
// statement3
}- if 안에 있는 조건식이 참인 경우 해당하는 if문, else if문을 실행 한다.
- 조건문(if, else if)에 모두 해당하지 않으면 else에 있는 statement3 이 실행된다.
- else if에는 개수 제한이 따로 없다.
2. 조건식 거짓으로 취급하는 값
- false
- undefined
- null
- 0
- NaN
- the empty string("")
3. 조건식에서 사용할 수 있는 비교 연산자
- ===, !== : 한 값이 다른 값과 같거나 다른지 판단
- <, > : 한 값이 다른 값보다 작은지 큰지 판단
- <=, >= : 한 값이 다른 값보다 작거나 같은지, 크거나 같은지 판단
ex)
var score = 96;
if (score >= 90){
console.log("점수 : A"); // 해당문 실행
}else if (score >= 80){
console.log("점수 : B");
}else if (score >= 70){
console.log("점수 : C");
}else if (score >= 60){
console.log("점수 : D");
}else {
console.log("점수 : F");
}
=> 점수 : A4. if문의 중첩
- if 문은 중첩이 가능하다
var score = 96;
var lecture = "sports";
if("sports" == lecture){
if (score >= 70){
console.log("점수 : pass");
}
else{
console.log("점수 : fail");
}
}else{
if (score >= 90){
console.log("점수 : A");
}else if (score >= 80){
console.log("점수 : B");
}else if (score >= 70){
console.log("점수 : C");
}else if (score >= 60){
console.log("점수 : D");
}else {
console.log("점수 : F");
}
}
=> 점수 : Pass