jquery.scollButtons examples

To use the scrollbuttons plugin, it is necessary to include jQuery and the plugin file, and to call the plugin. In the present document, we do it like this:

<script src="jquery-2.0.3.min.js"></script>
<script src="../jquery.scrollButtons.js"></script>
<script>
    $(document).ready(function () {
        ... here come the commands explained below ...
    });
</script>
		

The simplest example

jquery.scrollButtons will hide the vertical scrollbar and let you scroll with buttons instead. If you do not pass selectors for the buttons as plugin options, the plugin will automatically create an up- and a down-button.

$('.simplest .withButtons').scrollButtons();

Without plugin

Der Lorem-ipsum-Text eignet sich zwar für die redaktionelle Arbeit, um Blindtextpassagen schnell über die Suchfunktion zu finden, jedoch lassen sich diverse Gestaltungsaufgaben nicht mit dieser Vorlage lösen. Da die Wortlängen und die Buchstabenhäufigkeit nicht der deutscher Texte entspricht, und Großbuchstaben im Deutschen eine viel größere Präsenz haben, lässt sich der eigentliche Grauwert eines Textblockes durch Lorem ipsum nicht beurteilen. Aus dem gleichen Grund ist auch der optische Zeilendurchschuss irreführend. (Quelle: Wikipedia)

With plugin

Der Lorem-ipsum-Text eignet sich zwar für die redaktionelle Arbeit, um Blindtextpassagen schnell über die Suchfunktion zu finden, jedoch lassen sich diverse Gestaltungsaufgaben nicht mit dieser Vorlage lösen. Da die Wortlängen und die Buchstabenhäufigkeit nicht der deutscher Texte entspricht, und Großbuchstaben im Deutschen eine viel größere Präsenz haben, lässt sich der eigentliche Grauwert eines Textblockes durch Lorem ipsum nicht beurteilen. Aus dem gleichen Grund ist auch der optische Zeilendurchschuss irreführend. (Quelle: Wikipedia)

Customize the buttons

With the 'up' and 'down' options you can pass selectors to your own buttons. These buttons should be sisters of the scrollable area, and should usually have an absolut position. Here, we define display: none by default, such that the buttons do not appear in the version without the plugin. jquery.scrollButtons fades in the buttons if needed, and will also fade them out, if no scrolling is necessary.

$('.customButtons .withButtons').scrollButtons({
    up: '.up',
    down: '.down'});
		

Without plugin

Der Lorem-ipsum-Text eignet sich zwar für die redaktionelle Arbeit, um Blindtextpassagen schnell über die Suchfunktion zu finden, jedoch lassen sich diverse Gestaltungsaufgaben nicht mit dieser Vorlage lösen. Da die Wortlängen und die Buchstabenhäufigkeit nicht der deutscher Texte entspricht, und Großbuchstaben im Deutschen eine viel größere Präsenz haben, lässt sich der eigentliche Grauwert eines Textblockes durch Lorem ipsum nicht beurteilen. Aus dem gleichen Grund ist auch der optische Zeilendurchschuss irreführend. (Quelle: Wikipedia)
My Up Button
My Down Button

With plugin

Der Lorem-ipsum-Text eignet sich zwar für die redaktionelle Arbeit, um Blindtextpassagen schnell über die Suchfunktion zu finden, jedoch lassen sich diverse Gestaltungsaufgaben nicht mit dieser Vorlage lösen. Da die Wortlängen und die Buchstabenhäufigkeit nicht der deutscher Texte entspricht, und Großbuchstaben im Deutschen eine viel größere Präsenz haben, lässt sich der eigentliche Grauwert eines Textblockes durch Lorem ipsum nicht beurteilen. Aus dem gleichen Grund ist auch der optische Zeilendurchschuss irreführend. (Quelle: Wikipedia)
My Up Button
My Down Button

Scroll slowly

By default, the velocity is 300 pixel per second, and the total scroll duration is limited to two seconds. Here, we choose a very slow velocity and also enlarge the duration limit.

$('.scrollSlowly .withButtons').scrollButtons({
    velocity: 30,
    maxDuration: 10000});

Without plugin

Der Lorem-ipsum-Text eignet sich zwar für die redaktionelle Arbeit, um Blindtextpassagen schnell über die Suchfunktion zu finden, jedoch lassen sich diverse Gestaltungsaufgaben nicht mit dieser Vorlage lösen. Da die Wortlängen und die Buchstabenhäufigkeit nicht der deutscher Texte entspricht, und Großbuchstaben im Deutschen eine viel größere Präsenz haben, lässt sich der eigentliche Grauwert eines Textblockes durch Lorem ipsum nicht beurteilen. Aus dem gleichen Grund ist auch der optische Zeilendurchschuss irreführend. (Quelle: Wikipedia)

With plugin

Der Lorem-ipsum-Text eignet sich zwar für die redaktionelle Arbeit, um Blindtextpassagen schnell über die Suchfunktion zu finden, jedoch lassen sich diverse Gestaltungsaufgaben nicht mit dieser Vorlage lösen. Da die Wortlängen und die Buchstabenhäufigkeit nicht der deutscher Texte entspricht, und Großbuchstaben im Deutschen eine viel größere Präsenz haben, lässt sich der eigentliche Grauwert eines Textblockes durch Lorem ipsum nicht beurteilen. Aus dem gleichen Grund ist auch der optische Zeilendurchschuss irreführend. (Quelle: Wikipedia)

Scroll quickly

To make the scrolling faster, it is usually sufficient to limit the maximum duration, here to half a second.

$('.scrollQuickly .withButtons').scrollButtons({
    maxDuration: 500});

Without plugin

Der Lorem-ipsum-Text eignet sich zwar für die redaktionelle Arbeit, um Blindtextpassagen schnell über die Suchfunktion zu finden, jedoch lassen sich diverse Gestaltungsaufgaben nicht mit dieser Vorlage lösen. Da die Wortlängen und die Buchstabenhäufigkeit nicht der deutscher Texte entspricht, und Großbuchstaben im Deutschen eine viel größere Präsenz haben, lässt sich der eigentliche Grauwert eines Textblockes durch Lorem ipsum nicht beurteilen. Aus dem gleichen Grund ist auch der optische Zeilendurchschuss irreführend. (Quelle: Wikipedia)

With plugin

Der Lorem-ipsum-Text eignet sich zwar für die redaktionelle Arbeit, um Blindtextpassagen schnell über die Suchfunktion zu finden, jedoch lassen sich diverse Gestaltungsaufgaben nicht mit dieser Vorlage lösen. Da die Wortlängen und die Buchstabenhäufigkeit nicht der deutscher Texte entspricht, und Großbuchstaben im Deutschen eine viel größere Präsenz haben, lässt sich der eigentliche Grauwert eines Textblockes durch Lorem ipsum nicht beurteilen. Aus dem gleichen Grund ist auch der optische Zeilendurchschuss irreführend. (Quelle: Wikipedia)

When no action is needed

$('.noActionNeeded .withButtons').scrollButtons();

If there is no need to scroll, calling the Plugin will not have any effect.

Without plugin

A very short text.

With plugin

A very short text.