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.

$.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).

{ 6 } Comments

  1. Cat Dancer | February 21, 2009 at 2:15 pm | Permalink

    Exactly what I was looking for! Thank you!

  2. Ramin | March 7, 2009 at 12:34 pm | Permalink

    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.

  3. Rony Klachko | December 29, 2009 at 3:29 am | Permalink

    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.

  4. Danny | December 31, 2009 at 9:40 pm | Permalink

    @Rony:
    I 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

  5. Lars-Erik | November 7, 2013 at 2:38 am | Permalink

    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).

  6. Danny | November 7, 2013 at 5:08 pm | Permalink

    @Lars-Erik:
    Thanks for the feedback. I haven’t looked at this in a while. Your tweaks make sense.
    Danny

Post a Comment

Your email is never published nor shared. Required fields are marked *