A small example of clicking to scroll up and down written in JQuery_jquery

Functional requirements:
1. Display 10 records in the scroll box;
2. There are up and down scroll buttons. Each time you click the button, the number of records will scroll up or down without automatic scrolling;
3 , the number of records does not scroll in a loop, and the scrolling stops when it reaches the starting point or end point.
The following is a simple implementation method:
1. Outer container (div) overflow: hidden, inner list (ul)
2. Button click event triggers a function that modifies the list
3. Use animate to achieve animation effects
No more details, just go to the code
CSS settings

Copy the code The code is as follows:

JQuery code

Copy code The code is as follows:

(function ($) {
$.fn.extend({
Scroll: function (opt, callback) {
if (!opt) var opt = {};
var _btnUp = $("#" opt.up); //Shawphy: Up button
var _btnDown = $("#" opt.down); //Shawphy: Down button
var _this = this.eq(0).find("ul:first");
var lineH = _this.find("li:first").height(); //Get the line height
var line = opt.line ? parseInt(opt.line, 10) : parseInt(this.height() / lineH, 10); //The number of lines scrolled each time, the default is one screen, that is, the height of the parent container
var speed = opt.speed ? parseInt(opt.speed, 10) : 600; //Scroll speed, the larger the value, the slower the speed (milliseconds)
var m = line; //Variables used for calculation
var count = _this.find("li").length; //The total number of

elements
var upHeight = line * lineH;
function scrollUp() {
if (!_this.is(":animated")) { //Determine whether the element is being animated. If it is not animated, add animation.
if (m m = line;
_this.animate({ marginTop: "-=" upHeight "px" }, speed) ;
}
}
}
function scrollDown() {
if (!_this.is(":animated")) {
if (m > line) { / /Determine whether m is greater than the number of screens
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" });
});

You can set $("#scrollDiv").Scroll({ line: 10, speed: 500,up: "btn1", down: "btn2" }) ;Set the scroll button, number of scroll lines, and scroll speed.
Html Body content

Copy code The code is as follows:

Information scroll bar DEMO:

• This is the first line of the scrolling information


• This is the scrolling information The 2nd line


• This is the 3rd line of the scrolling information


• This is the 4th line of the scrolling information


• This is the 5th line of the scrolling information


• This is the 6th line of the scrolling information


• This is the scrolling information Line 7


• This is the 8th line of the scrolling information


• This is the 9th line of the scrolling information


• This is the 10th line of the scrolling message


• This is the 11th line of the scrolling message


• This is the scrolling message The 12th line


• This is the 13th line of the scrolling information


• This is the 14th line of the scrolling information


• This is the 15th line of the scrolling message


• This is the 16th line of the scrolling message


• This is the scrolling message The 17th line of


• This is the 18th line of the scrolling information


• This is the 19th line of the scrolling information


• This is the 20th line of the scrolling message


• This is the 21st line of the scrolling message


• This is the scrolling message Line 22


• This is the 23rd line of the scrolling information


• This is the 24th line of the scrolling information


• This is the 25th line of the scrolling message


• This is the 26th line of the scrolling message


• This is the scrolling message Line 27


• This is the 28th line of the scrolling information


• This is the 29th line of the scrolling information


• This is the 30th line of the scrolling message


• This is the 31st line of the scrolling message


• This is the scrolling message Line 32 of

Scroll up

Scroll down