스크롤 서서히 움직이기...
PlugIn Url : http://github.com/kswedberg/jquery-smooth-scroll (downLoad : jquery.smooth-scroll.js )
Test Url : http://www.uhoon.co.kr/test/904.html
* Option
{
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>
관련 게시글
지금 포트폴리오 만들면서 smoothScroll이 안되어서 계속 찾고 있던 중인데 ㅠㅠ 정말 감사합니다.