Doing jumps on the page are easier than every.

By the way, this page runs with the force.jump() function.

You can play around with the different easing functions, duration and jump cache mode.

To automatically detect hash links on your page, just use the force.bindHashes() function like this.

force.bindHashes();

But if you want to do it by yourself, use the force.jump() function.

var element = document.getElementBy('element-id');

// jump by object
force.jump(element);

// jump by selector
force.jump('#element-id');

You can use the function with additional options.

force.jump(target);

var options = {
  setHash: false
  // if set to TRUE, it sets the hash/id value of the element in the URL

  duration: 500,
  done: function() {},
  easing: 'easeInQuad',
};
force.jump(target, options);

Or the jQuery extention.

$('#ball').jump();

//$('#ball').jump(options);

You can also animate elements with force.js.

Example

To do so, just use the force.move() function.

var element = document.getElementBy('element-id');

// jump by object
force.move(element, {left: 100px, top: 50px}, 1000);

// jump by selector
force.move('#element-id', {left: 100px, top: 50px}, 1000);

You can use the function with additional options.

force.move(target, properties, duration, doneCallback);

var options = {
  properties: {
    left: '100px'
  },
  duration: 500,
  done: function() {},
  easing: 'easeInQuad'
};
force.move(target, options);

Or the jQuery extention.

$('#ball').move({left: 100px, top: 50px}, 1000);

// $('#ball').move(options, duration, doneCallback);

Don't worry if you use the function multiple times.

The force.move() function is cached!

That means, the function just get executed if the previous call is done.