반응형 jquery7 [Jquery] 클릭시 페이지 맨 위로 이동 하기 오늘은 버튼 클릭시 페이지 맨위로 이동하는 방법을 소개합니다. 먼저 jquery에 scrollTop() 이라는 메소드가 있는데요, scrolltop은 현재 페이지의 높이 위치 라고 생각 하시면 쉽게 이해할 수 있습니다. 버튼을 클릭했을시 scrolltop을 0으로 주어서 맨위로 가게하는 방식입니다. 1. 사이에 jquery 라이브러리 삽입 jquery 라이브러리는 넣어줍니다. 2.html 코딩 , css .gotop{width:200px;height:40px;line-height:40px;display:inline-block;margin-right:10px;background:blue;text-align:center;color:#fff;} .gotop2{width:200px;height:40px;line.. 2022. 10. 24. [Jquery] datepicker 사용 제이쿼리로 달력 입력 방법 달력을 이용해서 날짜를 입력하고 싶을 경우에 자주 사용되는 datepicker를 소개합니다 jquery에서 제공하는 기본 달력 ui 입니다. 참고사이트 https://jqueryui.com/datepicker/ Datepicker | jQuery UI Datepicker Select a date from a popup or inline calendar The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (b .. 2022. 9. 1. [Jquery] 이미지 떨림효과 주기 마우스 올렸을때 이미지가 떨리는것처럼 보이는 효과 입니다. 이미지를 icon 클래스의 div로 감싸주었습니다. 스크립트 하단 쪽에 스크립트 넣어줍니다. 2022. 8. 25. [Jquery] 스크롤 내렸을때 상단 메뉴 변경 스크롤 내렸을때 상단 컨텐츠가 바뀌는 스크립트를 소개합니다. #wrap{width:100%; height:1000px;} .main{width:100%; height:50px; background-color:blue; text-align:center; line-height:50px;} .scroll{width:100%; height:50px; position:absolute; left:0; top:0; background-color:green; text-align:center; line-height:50px; color:#fff; font-weight:600;} 상단 메뉴 스크롤 했을때 상단 메뉴 HTML, 스타일은 위와 같이 설정 해 주었습니다. $(document).ready(function(){ v.. 2022. 8. 11. 이전 1 2 다음 반응형
