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().
$.fn.scrollIntoView
$('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).
Cat Dancer says:
Exactly what I was looking for! Thank you!
February 21, 2009, 2:15 pmRamin says:
very nice plugin. Im also currently using the scrollTo plugin, but as you mentioned, it always positions the element on the top,left corner.. so I always end up “padding” the top, left values to get the element where I want it.
March 7, 2009, 12:34 pmRony Klachko says:
I’m trying to use this plug-in to scroll into view an element that resides inside of an Iframe. The js code belongs to the page inside the Iframe, but I want the entire window to scroll. I managed to scroll the entire window using the standart element.scrollIntoView() but offcourse without the nice effects jQuery can provide. Can you tell me if there is a way to make the plug-in work in my situation aswell? Thanks.
December 29, 2009, 3:29 amDanny says:
@Rony:
December 31, 2009, 9:40 pmI have no experience with getting the parent window from within an iframe; it may be a security issue that you can’t overcome. Sorry that I don’t have any hints.
–Danny
Lars-Erik says:
Hey, great script! I liked this one better than the ones available on github. Here are a few bug-fixes/updates:
1. For supporting newer webkit/blink browsers it might be beneficial to check for quirks-mode and use the ‘html’ for scroll. I inserted this before initialisation of ‘html’:
if(document.compatMode===’CSS1Compat’) html = $(‘html’)[0];
2. When scrolling up and down with mouse-wheel/arrow keys right after the $(html).animate, when the element is visible, the screen keeps scrolling back to the original point (within animation duration). I wrapped the whole $(html).animate with this:
if(scrollTop !== html.scrollTop || scrollLeft !== html.scrollLeft) {
…
}
Feel free to use this code as you wish (consider these ‘bug-fixes’ as public domain).
November 7, 2013, 2:38 amDanny says:
@Lars-Erik:
November 7, 2013, 5:08 pmThanks for the feedback. I haven’t looked at this in a while. Your tweaks make sense.
Danny