JQuery_jquery로 작성된 위아래로 스크롤을 클릭하는 작은 예

기능적 요구 사항:
1. 스크롤 상자에 10개의 레코드가 표시됩니다.
2. 버튼을 클릭할 때마다 자동 스크롤 없이 레코드 수가 위로 또는 아래로 스크롤됩니다. 🎜>3 , 레코드 수는 루프로 스크롤되지 않으며 시작점이나 끝점에 도달하면 스크롤이 중지됩니다.
다음은 간단한 구현 방법입니다.
1. 외부 컨테이너(div) 오버플로: 숨김, 내부 목록(ul)
2. 버튼 클릭 이벤트는 목록을 수정하는 함수를 트리거합니다
3. animate를 사용하여 애니메이션 효과 얻기
자세한 내용은 필요하지 않습니다.
CSS 설정

코드 복사로 이동하세요. 코드는 다음과 같습니다:

JQuery 코드

코드 복사

코드는 다음과 같습니다. < script type="text/javascript"> (함수 ($) { $.fn.extend({ 스크롤: 함수(선택, 콜백)

if (!opt) var opt = {};

var _btnUp = $("#" opt.up) //Shawphy: 위로 버튼
var _btnDown = $("#" opt.down ); //Shawphy: 아래쪽 버튼
var _this = this.eq(0).find("ul:first")
var lineH = _this.find("li:first").height() ; //라인 높이 가져오기
var line = opt.line ?parseInt(opt.line, 10) :parseInt(this.height() / lineH, 10); 기본값은 하나의 화면, 즉 상위 컨테이너의 높이입니다.
var speed = opt.speed ?parseInt(opt.speed, 10) : 600; //스크롤 속도, 값이 클수록 속도가 느려집니다( milliseconds)
var m = line; //계산에 사용되는 변수
var count = _this.find("li").length; //

요소의 총 개수 line * lineH;
function scrollUp() {
if (!_this.is(":animated")) { //요소가 애니메이션되고 있는지 확인합니다.
if (m < count) { //m이 총 개수보다 작은지 확인
m = line
_this.animate({ marginTop: "-=" upHeight "px" }, speed; ) ;
}
}
}
function scrollDown() {
if (!_this.is(":animated")) {
if (m > line) { / /m이 화면 수보다 큰지 확인
m -= line
_this.animate({ marginTop: " =" upHeight "px" }, speed)
}
}
}
_btnUp.bind("click", scrollUp)
_btnDown.bind("click", scrollDown)
}
})(jQuery) ;
$(function () {
$("#scrollDiv").Scroll({ line: 10, speed: 500,up: "btn1", down: "btn2" });
} );



$("#scrollDiv").Scroll({ line: 10, speed: 500,up: "btn1", down: " btn2" }) ;스크롤 버튼, 스크롤 라인 수 및 스크롤 속도를 설정합니다.
Html 본문 콘텐츠




코드 복사

코드는 다음과 같습니다.

정보 스크롤 막대:

>

• 스크롤 정보의 첫 번째 줄입니다


• 2번째 줄


• 스크롤 정보 3번째 줄입니다


• 스크롤 정보 4번째 줄입니다
  
• 스크롤 정보의 5번째 라인입니다


• 스크롤 정보의 6번째 라인입니다


• 스크롤 정보 라인입니다 7


• 스크롤 정보 8번째 줄입니다
스크롤 정보 9번째 줄입니다 li>스크롤링 메시지의 10번째 줄입니다

• 스크롤링 메시지의 11번째 줄입니다


• 스크롤링 메시지의 12번째 줄입니다< ;/li>
  
• 스크롤 정보 13번째 줄입니다
스크롤 정보 14번째 줄입니다 ;스크롤링 메시지의 15번째 줄입니다

• 스크롤링 메시지의 16번째 줄입니다
스크롤링 메시지의 17번째 줄입니다< ;/li>

• 스크롤 정보 18번째 줄입니다
스크롤 정보 19번째 줄입니다 ;스크롤링 메시지의 20번째 라인입니다스크롤링 메시지의 21번째 라인입니다스크롤링 메시지의 22번째 라인입니다

• 스크롤 정보 23번째 줄입니다
스크롤 정보 24번째 줄입니다 는 스크롤 메시지의 25번째 줄입니다이것은 스크롤 메시지의 26번째 줄입니다이것은 스크롤 메시지의 27번째 줄입니다

• 스크롤 정보 28번째 줄입니다


• 스크롤 정보 29번째 줄입니다
스크롤링 메시지의 30번째 라인입니다.

• 이것은 스크롤링 메시지의 31번째 라인입니다.
  
• <의 스크롤링 메시지 라인 32입니다. 🎜>

위로 스크롤
아래로 스크롤