영원히 흘러가는 강
스크롤시에 맨위로 올리기 버트(천천히) 본문
html+css+js
바닐라 자바스크립트로만 구현해본 코드
수 많은 글과 컨텐츠가 존재할때에 맨위로 올라가기 버튼이 필요할텐데 이를 위해 구현
배운점 :
1. document.documentElement :
documentElement 속성은 문서의 documentElement를 Element 객체로 반환합니다.
HTML 문서의 경우 반환 된 객체는 <html> 요소입니다.
2.
document.documentElement.scrollHeight, document.documentElement.offsetHeight
크로스 브라우징에서의 해결점
높이 구할때!
let scrollHeight = Math.max( document.body.scrollHeight, document.documentElement.scrollHeight,
document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight,
document.documentElement.clientHeight );
3.
document.documentElement.scrollTop , window.scrollBy
document.documentElement.scrollTop은 스크롤 이동시 움직인 크기를 구한다.!
crollBy () 메서드는 지정된 픽셀 수만큼 스크롤한다. (x축,y축)
모르는것은 항상 그 로직부터 보는게 맞는거 같다
변수로 설정된 값은
화면의 크기, 스크롤의 수, 버튼이 보이게 할 스크롤의 수 = docHeight , scrollPos ,offset
docHeight의 수가 존재한다면 offset에도 값 정의
스크롤 이벤트 등록한다 scrollTop 메소드로 변경값을 scrollPos에 저장
scrollPos가 offset 보다 크다면 className로 class 추가 (class 추가시에 css로 a태그 opacity 변경)
버튼 생성시에 e.preventDefault(); 로 동작 정지
천천히 올라가게 하기 위해 setInterval로 0이 아닐때 까지 window.scrollBy 동작
<script >
let btt=document.querySelector('#back-to-top'),
docElem=document.documentElement, //문서 자체
offset,
scrollPos, //스크롤 양
docHeight;
// 문서 높이 계산
// docElem.scrollHeight; 도 가능
/*docHeight=docElem.offsetHeight; //길이 구하는 메소드 */
//브라우져 마다 다른 값 가지므로
docHeight=Math.max ( document.body.scrollHeight, document.documentElement.scrollHeight,
document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight,
document.documentElement.clientHeight);
// offset 정도의 크기가 되면
if(docHeight!='undefined'){
offset=28/*docHeight/4*/; //보여지는 페이지 다음이 28이라서
}
//스크롤 이벤트
window.addEventListener('scroll',function(){
scrollPos=docElem.scrollTop;
console.log(scrollPos);
btt.className=(scrollPos>offset)?'visible':'';
});
btt.addEventListener('click',function(e){
e.preventDefault();
scrollTop();
})
function scrollTop(){
let scrollInterval=setInterval(function(){
if(scrollPos!=0){
window.scrollBy(0,-55);
}else{
clearInterval(scrollInterval);
}
},15)
}
</script>
'html+css+js > JavaScript' 카테고리의 다른 글
| 노마드 코더 (바닐라js로 그림판 만들기) (0) | 2021.03.29 |
|---|---|
| 바닐라 자바스크립트 타자게임 (0) | 2021.03.19 |
| 노마드 코더 바닐라 자바스크립트 (0) | 2021.03.12 |
| js 슬라이더 (0) | 2021.03.10 |
| js 아코디언 (0) | 2021.03.10 |
