sunny

안녕하세요. ^-^ 오늘은 안 예쁜 scroll bar를 커스텀 해보겠습니다. 아주아주 간단하게 가능합니다. 일단 scroll이 생겼을 때 가장 기본적인 모양을 보실까요? 이렇게 생겼죠. 좀 더 예뻤으면 좋겠어요. 바꿔 볼까요? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 Document section{ width:1000px; height:1000px; } ::-webkit-scrollbar { width: 5px;height:5px } ::-webkit-scrollbar-track { background-color: #dddddd; } ::-webkit-scrollbar-thumb {background: #000000;border-r..

안녕하세요:) 오늘도 만들기는 쉽지만 찾아보기는 귀찮은 [ 스크립트 ]를 적어볼까 합니다. 바로 [ 원페이지 ]에서 사용하는 스크롤 부드럽게 이동하기입니다. 원페이지에서는 메뉴에 [ a ] 태그에 링크를 걸고 아래쪽으로 이동시키는 방법을 많이 쓰죠 [ a ] 링크를 눌렀을 때 뿅~~ 하고 뜨는 게 아니라 밑으로 스크롤이 부드럽게 내려가면~~ 얼마나 자연스러울까요~~ 1 2 3 4 5 6 $('a').click(function(){ $('html, body').animate({ scrollTop:$($.attr(this, 'href')).offset().top }, 500); return false; }) Colored by Color Scripter cs 스크립트 내용은 아주 간단합니다. 이 내용만 넣어..

안녕하세요:) 오늘은 웹페이지를 만들면서 늘 헷갈려하는, 찾아보게 만드는 [ ScrollTop ] 버튼을 만들어 봐요. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 $(window).scroll(function() { if ($(this).scrollTop() > 150) { $('.scrollup').fadeIn(); } else { $('.scrollup').fadeOut(); } }); $(".scrollup").on('click', function (e) { e.preventDefault(); $('html, body').animate({ scrollTop: 0 }, 600); return false; }); Colored by Color Scripter cs 사실 저도 엄청 ..