How can you scroll to a target element?

[u01jmg3]

• Is there any way this plugin can understand how to scroll to a target element?

[hashchange]

That's not yet part of the plugin because technically, that is the easiest part about scrolling and not something you'd necessarily need a plugin for.

I have thought about it, though, and I'll add it at some point, with an API that hopefully will be adding some value:

$container.scrollTo( 
    HTMLElement|jQueryElement|selector, 
    { 
        alignTo: "top"|"bottom"|"left"|"right"|"center"|"nearest"|hash of offsets, 
        box: "border-box"|"content-box"
    } 
);

However, that doesn't work right now, so instead you can use the getScrollTargetPosition() function of this gist. It calculates the target position which you can then pass to .scrollTo().

The function deals with whatever borders, margins and paddings you have set on either the target or the scroll container. It assumes that you want to align the top edge of the target's border box with the top border of the container. If that doesn't fit your bill, you can easily tweak it – it's just a few lines of code.

[u01jmg3]

Thanks for this, much appreciated. The API you're proposing sounds very promising.

The only thing I'd add is when aligning to the bottom, to be able to say only to do this as far as not scrolling the top of the element out of view. Basically a "try and scroll this whole div into view but only as far as not hiding the top of it" scenario.

[hashchange]

Good point, thank you! I had already thought about a few edge cases but this one hadn't been on my list. Would be useful indeed. The challenge will be how to solve this while keeping the options simple. I'll think about it.

[u01jmg3]

If you require a second pair of hands 👐 or eyes 👀 , I'm happy to help.

[hashchange]

Thanks a lot for your offer! I probably won't be able to work on the plugin until next year, to be honest (too much other stuff on my plate). Feel free to fork it if you need to get things going earlier.