부트스트랩,ScrollSpy

부트스트랩의 scrollspy는 메뉴를 클릭하면 그 부분으로 이동하는 것입니다. 메뉴를 클릭하면 이동하는 것을 여러 사이트에서 많이 봤을 것입니다. 세군데의 예제를 보면 무슨 말인지 이해가 됩니다. 

첫 번째 부트스트랩 공식 홈페이지의 scrollspy를 설명한 부분인 http://getbootstrap.com/javascript/#scrollspy에서 볼 수 있습니다. 두 번째는 한글 부트스트랩의 자바스크립트 스크롤스파이(scrollspy)에서도 볼 수 있습니다. 세 번째도 저는 w3schools.com의 http://www.w3schools.com/bootstrap/bootstrap_scrollspy.asp에서 보는 것을 추천합니다. 왜냐하면 비록 거기는 영어라도 메뉴가 가로와 세로인 예 등 다양한 예제를 볼 수 있어 이해하는데 도움이 됩니다. 

위는 메뉴를 클릭하면 바로 이동하는 것이고 이번에 볼 것은 부드럽게 이동하는 scollspy 입니다. 여기에서 부드럽게 이동하는 것을 볼 수 있으며 소스를 구할 수 있습니다. 예전에 부드럽게 이동하는 ScrollSpy를 어떻게 하는지 궁금했거든요. 

여담으로 부트스트랩의 자바스크립트 부분을 대강 넘어갔는데 유용한 소스를 http://w3schools.com에서 많이 얻을 수 있었습니다. 그리고 http://www.jqueryrain.com/를 보면 부트스트랩에 대한 다양한 템플릿과 멋있는 테마가 있었습니다. 부트스트랩의 기본만 사용하면 단순하니 다양한 템플릿이나 테마를 보면서 다양하게 꾸며 단순함을 탈피해야 합니다. 아래 더보기에 scrollspy 테마가 있으니 관심 있으면 보길 바랍니다. scrollspy는 웬만한 테마는 기본적으로 사용합니다. 

http://startbootstrap.com/template-overviews/scrolling-nav/

http://startbootstrap.com/template-overviews/creative/

http://startbootstrap.com/template-overviews/agency/

http://startbootstrap.com/template-overviews/freelancer/

http://ironsummitmedia.github.io/startbootstrap-grayscale/

http://startbootstrap.com/template-overviews/stylish-portfolio/

http://www.bootstrapzero.com/bootstrap-template/affix-sidebar

다시 돌아와 아래 그림처럼 지금은 아니지만 예전에 제가 body에 data-spy="scroll"만 추가하여 원하는 지점으로 이동하게 하였습니다. 제가 알아서 한 것이 아니라 스킨을 수정하다가 그냥 안 것입니다. 이 페이지 상단 댓글작성을 클릭하면 이동할 것입니다. 그리고 이 블로그 방명록 등에서 아래로 아이콘을 클릭하면 아래로 이동하는 것과 마찬가지도요. 원하는 지점으로 갔을 때 메뉴 배경색도 변하는 것은 data-target="메뉴 클래스명"을 사용했을 때인 것 같습니다. 제가 부트스트랩 scrollspy를 100% 몰라 미안합니다.

이 블로그에서 아래로 아이콘을 클릭하면 부드럽게 이동하는 것과 위로가기는 부트스트랩 scorollspy를 이용한 것이 아닙니다. 그것은 각각 https://css-tricks.com/snippets/jquery/smooth-scrolling/와 http://bootsnipp.com/snippets/featured/link-to-top-page에서 배운 것입니다. 부드럽게 이동하는 것은 다른 소스가 간단하더라고요.