jQuery vScroll – Simple animated vertical content scroller supporting varying heights

This plugin turns a container with sub containers into a scrolling window with previous and next buttons, the content can be anything and the heights of these can vary as needed. The plugin is very small (minified version just over 500 bytes).

A demo of this being used on a live site I developed can be found here where it is used to scroll the news content: http://waterwell.co.uk/news.aspx

To use it simply create a container element and a previous and next button (these can be any html elements), then apply this plugin to the container element specifiying the height you want the container to be.

All sub containers will become scrollable elements which can be accessed via the previous and next buttons.
A demo can be found here: http://simon.tpdserver2.co.uk/jquery/vscroll/demo/

How-to:

1) Basic example html markup, 2 buttons and a container with sub containers:

<input type=”button” value=”Prev” id=”prevButton” />
<input type=”button” value=”Next” id=”nextButton” />

<div style=”height:400px” id=”demo2″>

<div>some content</div>

<div>some more content</div>

<div>some other content</div>

<div>

2) Include the jQuery files (I use Google CDN for jQuery) and apply the plugin to the container:

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js” type=”text/javascript”></script>

<script src="js/jquery.vscroll-1.2.0.min.js" type="text/javascript"></script>

<script type=”text/javascript”>
$().ready(function () {
$(‘#demo2’).vScroll({ speed: 500, height: 300, upID: “#prevButton-demo2”, downID: “#nextButton-demo2”, cycle: true });
});

</script>

Plugin can be downloaded from here:

http://plugins.jquery.com/content/vscroll-121

Plugin options:

speed – how fast the scroll animation is (default = 500)

height – height of the container element (you must include this from V1.2.0 onwards otherwise the container will default to 300px)

upID – id of the element used to trigger the up animation (default = #up-arrow)

downID – id of the element used to trigger the down animation (default = #bottom-arrow)

cycle – Whether or not to scroll back to the first item if the next button is clicked on the last item (default = true)

  • Jason

    Hi Simon,
    Is there a way to set this scroller to “Auto” so that the items slide up say every 5 seconds? Please let me know i’m loving the plugin thus far.

    Thanks,
    Jason

    • Luca

      you can put a setTimeout function with a function that emulate the next button click.

      $(‘#buttonNextid’).click();

      it worked 4 me.

  • Jason

    Anyone know the answer to the auto scroll question? It’s kind of urgent.

    Thanks,
    Jason

    • shibbard

      Hi Jason. This could be done but then opens up some other issues. What happens when it reaches the last post, should it stop or cycle – cycle involves a lot of work to add. Also the next/prev buttons would need to interupt it, and/or it should pause on hover.

      So there would be things to think through when adding this. Unless it just scrolls until the end for now.

      Thanks for the feedback.

      Simon

  • http://kloobi.net Kloobi

    Invalid under Internet Explorer 7.

  • Rajesh Pant

    In safari resize the window it is not working properly.

  • Nikita

    Hi! I have some problems with creating multiple vScrolls on the same page. Can u help me?

  • Nikita

    Sorry, I’ve found decision of my problem.

  • Pingback: jQuery vScroll v1.2.0 released – multiple instance support + cycle feature « HibboBlog

  • bey

    very important thnak’s for your tired

  • shiva

    hi there,
    i have two containers, that have vscroll both. it seems like it is not working properly when they are two. it calculates the height of the coniatner once.
    i am adding like this:


    $('#results_text').vScroll({ speed: 1000, height: 90, upID: "#resultsUp", downID: "#resultsDown", cycle: false });
    $('#execution_text').vScroll({ speed: 1000, height: 400, upID: "#executionUp", downID: "#executionDown", cycle: false });

    • http://www.tpddesign.co.uk Simon

      Hi Shiva,

      Are you using the latest version 1.2?

      http://plugins.jquery.com/content/vscroll-120

      This added support for multiple instances. If it is still a problem let me know (a link to the page would be ideal).

      thanks,

      Simon.

      • http://www.toyfruit.com/shiva/vscroll/ shiva

        Hi simon,

        thanks for the reply, yes i am using the latest version and still my second scroller does not scroll properly.
        this is my example page:http://www.toyfruit.com/shiva/vscroll/

        regards

        • http://www.tpddesign.co.uk Simon

          Hi Shiva,

          They both scroll independently and have the sizes correct.

          Do you mean that it is not scrolling to the correct position?

          If so it looks like you have padding/margins set on the scrolling elements which should be removed. You can have padding etc inside the scrolling containers but not on the outside of them otherwise it will effect what the plugin see’s as the ‘top’ of the container.

          Always be sure to use a CSS reset in your stylesheets as browsers add thier own default paddings and margins to elements as well. e.g. http://meyerweb.com/eric/tools/css/reset/

          regards,

          Simon.

          • http://www.toyfruit.com/shiva/vscroll/ shiva

            Hi Simon,
            once again thanks for the reply. I removed all the padding and margins. FYI, this not my actual site 😉 my actual site is a drupal based website.
            the big container work absolutely fine. but
            my problem is the second smaller container (height: 70px). It scroll too much (-160) which is the same amount for the big container so, is not possible to read some of the lines in the smaller container.

            Regards,

        • http://www.tpddesign.co.uk Simon

          Hi Shiva,

          Looks like you found a bug. I have identified the cause and made a fix release.

          Can you check it works okay for you?

          http://plugins.jquery.com/content/vscroll-121

          Thanks,

          Simon.

          • http://www.toyfruit.com/shiva/vscroll/ shiva

            wohoooo well done, works like a charm 🙂

        • http://www.tpddesign.co.uk Simon

          Great, thanks for letting me know 🙂

  • Vincent

    Hi there,

    I’m deseperately trying to make vScroll work with a html table (inside a div wrapper)…
    Is there a way to achive that ?

    Thanks
    Vincent

    • http://www.tpddesign.co.uk Simon

      Hi Vincent,

      Do you have a link to a page that I can have a look at?

      Simon.