jQuery.scrollIntoView¶ ↑

author

Arwid Bancewicz arwid.ca (up to version 0.3)

author

Leonardo Fernandes leonardo.monteiro.fernandes@gmail.com

version

0.5

updated

15 Feb 2016

Similar to the default browser scrollIntoView, this jQuery plugin scrolls an element into view to the top or bottom of its container but not if it’s already visible. The demo page is here rawgit.com/leonardo-fernandes/jQuery.scrollIntoView/master/demo.html.

Usage¶ ↑

An animated scroll:

$("#some_element").scrollIntoView();

No animation:

$("#some_element").scrollIntoView(false);

Configure the animation (same options as in jQuery animate()):

$("#some_element").scrollIntoView(250, "easeOutExpo", function() { alert("done scroll!") });

$("#some_element").scrollIntoView({
  duration: true,
  easing:'easeOutExpo',
  complete: $.noop(),
  step: $.noop(),
  queue: false,
  specialEasing: null
});

Same for multiple elements:

$(".some_elements").scrollIntoView();

• Refer to api.jquery.com/animate/ for a description of the options.

• By default the animation easing will be ‘easeOutExpo’ if jQuery UI Effects is included before this file. Otherwise, it’ll use jQuery’s default ‘swing’ easing which isn’t great. So make sure to download Effects Core from jqueryui.com/download and include it before this file for a better animation.

jQuery.scrollIntoView is covered by the MIT License.