Skip to content

Arwid/jQuery.scrollIntoView

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

31 Commits
 
 
 
 
 
 
 
 

Repository files navigation

jQuery.scrollIntoView

author

Arwid Bancewicz arwid.ca

version

0.3

updated

8 Jan 2013

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 arwid.github.com/jQuery.scrollIntoView/.

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.

Also Included

Also included is a utility method isOutOfView that works for multiple elements:

$(".some_elements").isOutOfView()

Or for completely out of view:

$(".some_elements").isOutOfView(true)

Also included is a utility called commonAncestor which returns the common ancestor of elements:

$(".some_elements").commonAncestor()

License

jQuery.scrollIntoView is covered by the MIT License.

About

jQuery plugin to smoothly scroll elements into view.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published