Skip to content

New plugin scrollIntoView

One thing that bugged me about my textpopup plugin was that the popup would not necessarily be visible on screen. datepicker moves the widget to a visible spot on screen, which I find very disconcerting. Ariel Flesler's scrollTo was my inspiration, but it scrolls an element so that its top left corner is at the top left of the screen. I want to scroll as little as possible to have the element in its entirety visible. Thus $('#myelement').scrollIntoView().

Download the code.

See the demo.


$('selector').scrollIntoView(opts) scrolls the first element matched into view, with the following options:

padding {Boolean}
true if the padding is to be scrolled into view as well as the content
border {Boolean}
true if the border is to be scrolled into view. If border is true, padding is set to true
margin {Boolean}
true if the margin is to be scrolled into view. If margin is true, border and padding are set to true
animate options
Any option that can be passed to $.fn.animate such as duration, easing and complete can be used

As a shortcut, it can be called as $('selector').scrollIntoView(duration, easing, callback) which is the same as $('selector').scrollIntoView({duration: duration, easing: easing, complete: callback).

{ 6 } Comments

  1. Fatal error: Uncaught Error: Call to undefined function ereg() in /home/public/blog/wp-content/themes/barthelme/functions.php:178 Stack trace: #0 /home/public/blog/wp-content/themes/barthelme/comments.php(34): barthelme_commenter_link() #1 /home/public/blog/wp-includes/comment-template.php(1469): require('/home/public/bl...') #2 /home/public/blog/wp-content/themes/barthelme/single.php(44): comments_template() #3 /home/public/blog/wp-includes/template-loader.php(74): include('/home/public/bl...') #4 /home/public/blog/wp-blog-header.php(19): require_once('/home/public/bl...') #5 /home/public/blog/index.php(17): require('/home/public/bl...') #6 {main} thrown in /home/public/blog/wp-content/themes/barthelme/functions.php on line 178