block scroll logo



02-blocks-of-infoBlock scroll is a jQuery plugin that turns a set of <div> elements into a blocks and displays them one screen at a time. The idea is to break up your page into chunks for better presentation and user-flow. Block Scroll automatically turns your page responsive.


Up and down movements can be performed using keyboard, scroll, buttons, or the mouse wheel*.

As well, the design is responsive and it automatically adjusts to any reasonable resolution so long as you don’t overload each block.

Pages are sticky, which means that they automatically adjust to the vertical center of the screen.

The look and feel are customizable through css and initialization settings.

Up and down buttons are automatically wired in so long as you use the right id names for them.

You can change the location of the active block using javascript after it’s initialized.


To see this plugin in action check out one of the two demos:

Demo #1: Plugin Documentation : this demo illustrates how you can make fixed menus and add some color to your page.

Demo #2: A comic by XKCD : this demo shows you how the fade in effect looks as well as what it looks like to turn off the scroll bar. It also shows you how you could make presentations using this plugin (hint: view in full screen mode – F11 in chrome)


Include jquery, blockScroll.js, and blockScroll.css

<script src="js/jquery.js"></script>
<script src="js/blockScroll.js"></script>
<link rel="stylesheet" type="text/css" href="css/blockScroll.css">


Create a wrapper and create direct children <div>’s that hold all the content

<div id="main-wrap">
      <div>FIRST BLOCK</div>
      <div>SECOND BLOCK</div>


Run the blogScroll javascript on the wrapper element:

$(function() {
      var blockScroller = $("#main-wrap").blockScroll();



For now, you can customize the speed of the scroll, whether the blocks fade in on first show, and the speed of the fade on initialization.

      scrollDuration: [jQuery duration],
      fadeBlocks: [bool],
      fadeDuration: [jQuery duration]

There rest is up to you to customize in the CSS. For example, you can turn off the scroll bar with

       overflow: hidden;

Or you can add a background or background color to the blocks such as in demo #1. You can turn off the scroll bar all together like in demo #2.

Go to  Block

Block scroll lets you jump to a specific block with javascript using the returned function, “goto.”

var blockScroller = $(“#main-wrap”).blockScroll();
blockScroller.goto([block #]);

Future releases will allow different types of input such as anchor tags and css selectors. For now, you can only link to the block #, which might get frustrating you need to add blocks to you page.


Download from github. 


Comments 2

  1. Pingback: Block scroll jQuery Plugin – Jimmy's Blog

  2. Denis

    great script ! Very cool navigation !
    I’m using it to develop a small website but I’m facing a problem.
    On the second block/section, I would like to insert a full screen slideshow but I don’t know how to define a full-screen div inside a “block-scroll” section.
    Could you please help me or at least give a clue ?
    Thank you !

Leave a Reply

Your email address will not be published. Required fields are marked *