scroll

문제해결 : hash값 받아서 scroll 조정하기

상황 A 페이지에서 a태그 여러개에 링크를 걸어서 누르면 B페이지의 각각 다른 위치로 연결되게 하려고 한다. (여기서 A페이지와 B페이지는 각기 다른 HTML이다.) A페이지 제목1 제목2 제목3 제목4 ... B페이지 컨텐츠 제목 1 컨텐츠 ... 컨텐츠 제목 2 컨텐츠 ... 컨텐츠 제목 3 컨텐츠 ... 컨텐츠 제목 4 컨텐츠 ... 컨텐츠 제목 5 컨텐츠 ... ... 문제 항상 상단에 css가 fixed로 고정되는 header가 있어서 링크로 이동했을 시 원하는 정확한 위치의 처음부터 보이지 않고 중간부터 보이는 현상이 있었다. 조건 A페이지에서 a태그를 누르면 B페이지의 해당 해시아이디를 가진 h4가 header 바로 아래 오도록 스크롤이 이동되어야 한다. 해결 B페이지에서 아래 코드를 실행시..

Level 2 : 6~13(숙제 및 깨달은 점)_scroll

6. Carousel slider 만들기 조건 번호를 누르면 해당 이미지로 이동할 수 있다. $('.slide-1').on('click', function(){ $('.slide-container').css('transform', 'translateX(0)'); }) $('.slide-2').on('click', function(){ $('.slide-container').css('transform', 'translateX(-100vw)'); }) $('.slide-3').on('click', function(){ $('.slide-container').css('transform', 'translateX(-200vw)'); }) 7. Carousel slider 만들기 2 조건 이전/다음버튼 만들기. 첫..

[코딩애플] 스크롤 이벤트

스크롤바 위치 찾기 : window.scrollY, window.scrollTop() window.addEventListener('scroll', function(){ console.log(window.scrollY); //window.pageYOffset과 동일한 기능(이쪽이 호환성이 더 떨어짐) }) //jquery버전 $(window).on('scroll', function(){ $(window).scrollTop() //(100) 괄호안에 숫자를 넣으면 현재스크롤바 이동 }); 더 알아가기 : scrollTop은 현재 스크롤바 이동 기능도 겸한다. 강제로 맨 위에서부터 스크롤하기 : scrollTo(x,y) window.addEventListener('scroll', function(){ wind..