버튼 클릭하면 스크롤 움직이게 만들어 달라고... - ,-;
작동은 되니 적용... (언제쯤 고수가 될지.. ㅠㅠㅠㅠㅠ)
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body>
<div id="wrap" style="overflow:auto;width:200px;height:220px">
<div class="content">
mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text mini test text
</div>
</div>
<button type="button" id="up">위로</button>
<button type="button" id="down">아래로</button>
<script>
jQuery(function($){
var $wrap = $('#wrap'),
$content = $('.content').height(),
$up = $('#up'),
$down = $('#down'),
$height = $content - $wrap.height(),
$flag = 0,
$move = 200;
$down.on('click', function(){
if($flag >= $height){
return false;
} else {
var $action = $flag += $move;
//$wrap.scrollTop($move);
$wrap.stop().animate({scrollTop : $action}, 500);
console.log($flag);
}
});
$up.on('click', function(){
if($flag <= 0){
return false;
} else {
var $action = $flag -= $move;
//$wrap.scrollTop($move);
$wrap.stop().animate({scrollTop : $action}, 500);
console.log($flag);
}
});
$wrap.scroll(function(){
var $scHeight = $wrap.scrollTop();
$flag = $scHeight;
console.log($scHeight)
});
});
</script>
</body>
</html>
728x90
반응형
'WWWEB > Script' 카테고리의 다른 글
| [js] 키워드, 예약어 (0) | 2017.06.18 |
|---|---|
| [tweenmax]트윈맥스 라이브러리 라이선스 (0) | 2016.10.11 |
| [js] URL가져오기 - JavaScript Window Location (window.location) (0) | 2016.09.12 |
| 마우스 드래그를 막고싶다면 (0) | 2016.08.18 |
| 이메일 유효성 검사 (0) | 2015.11.16 |
| 자바스크립트 \t, \n 등 이스케이프 시퀀스 (0) | 2012.12.20 |
| jQuery API (0) | 2012.02.09 |
| 스크롤바 디자인 변경 (1) | 2010.07.07 |
댓글