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 says:

    Exactly what I was looking for! Thank you!

  2. Ramin 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.

  3. Rony 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.

  4. Danny says:

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

  6. Danny says:

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

Leave a Reply


Warning: Undefined variable $user_ID in /home/public/blog/wp-content/themes/evanescence/comments.php on line 75