-
728x90
지정위치로 스크롤바를 부드럽게 이동 시켜줍니다.
PlugIn Url : http://github.com/kswedberg/jquery-smooth-scroll
샘플 코드 다운로드 :
904.zip* 옵션 값
{ offset: 0, // one of 'top' or 'left' direction: 'top', // only use if you want to override default behavior scrollTarget: null, // fn(opts) function to be called before scrolling occurs. // `this` is the element(s) being scrolled beforeScroll: function() {}, // fn(opts) function to be called after scrolling occurs. // `this` is the triggering element afterScroll: function() {}, easing: 'swing', speed: 400, // coefficient for "auto" speed autoCoefficent: 2 }* 샘플 코드<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> <script src="/test/904/jquery.smooth-scroll.js"></script> <style> a { color: #8ad459; text-decoration: none; } </style> </head> <script type="text/javascript"> $(document).ready(function($) { $('a').smoothScroll({ speed: 1000, easing: 'easeInOutCubic' }); }); </script> <body> <div style="position: fixed; top:50px;background: #fff"> <ul style="list-style: none;"> <li></li> <li><a href="#Red" >Red</a></li> <li><a href="#blue">blue</a></li> <li><a href="#pink">pink</a></li> </ul> </div> <div> <div style="background-color:red;height:400px;" id="Red"> </div> <div style="background-color:blue;height:400px;" id="blue"/> </div> <div style="background-color:pink;height:400px;" id="pink"/> </div> <div style="height:300px;"></div> </div> </body> </html>728x90댓글
꼰대 개발자의 블로그
꼰대가 흐름을 따라가고 싶어서 기록하는 블로그
