JS: Dynamic Scrollings Vertical, Horizontal And Both: Scroll To A Layer Position Inside A Layer, Scroll To A Numerically Defined Position Inside A Layer, Scroll The Whole Document (Javascript)

This javascript is meant to operate as a class, and its name is quickscroll. As its name suggests, it is designed to perform scrolling animations within a window or within a scrollable layer, till a defined offset is reached. It is not unusual, in fact, to listen to the request of an animated scrolling process (rather than an instantaneous one like for instance it happens via html anchors) so to capture better the attention of the onlooker, and to be able to trigger this animated scrolling not only for a window but also within a layer.

Here is a description of this class arguments as they should be passed upon an initialization of a class instance, after which we'll see how to initialize it with some example arguments:

variableName:
since the script is a class, you initialize it via the keyword new;such initialization has to be assigned to a variable name of your choice, say it's named foo.
If such is the name, the simplest initialization requires that this mandatory argument is passed, and that it is the very same name of the chosen variable name passed as a string namely in between quotes; that is:
var foo = new quickscroll('foo');
The keyword var is indispensable.

It is not safe to produce any initialization, with this class, within javascript event handlers; that is, things like the following should better be avoided:
onClick="var foo=new quickscroll('foo')"
because in such case the variable foo would have no window scope, which it must have.
Consequently, it is quite safe to produce such initialization in a script tag which can be placed anywhere, as long as, if you pass the next arguments to be described shortly and which can be layer ids or layer nodes, such layer nodes are placed in your codes at some position before the placement of this class initialization.
object:
this argument can be:
- A grabbed DOM node, and in such case it would represent a layer within which you want to scroll.
  Such DOM node object can be grabbed, for instance, via document.getElementById("anIDhere") or document.getElementsByTagName etc...
- A string: if it is a string, the script will assume it is an ID assigned to a layer, and will grab it via document.getElementById.
- Zero: in such case the argument gets bypassed, and it defaults to grabbing the BODY tag - which therefore, in this residual case, is a tag that must exist in your document.
This argument identifies the element you want to scroll (and as said, if it's passed as zero, such element defaults to the body tag, namely to the whole document).

However, since it can also be a layer (passed, as seen, as an already grabbed node, or as a string to be grabbed via document.getElementById etc), if it is a layer it has to meet two requirements in order to be scrollable:
- It must have a css position either set to absolute or relative.
  The script will check for this. If it finds neither, it will impose a relative one.
- It must have a css overflow either set to auto or scroll.
  The script will check for this. If it finds neither, it will impose a scroll one.
scrollUntil:
this argument can be:
- An already grabbed DOM node. If so, it means that within the object, you are about to perform a scrolling until the offset positions of such nested node is met (that is, it has reached the topmost section of the scrollable view in the layer). So it presumes the node must be nested.
- A String. If so, it means that within the object, you are about to perform a scrolling until the offset positions of a nested layer which carries that string as its ID. So it presumes such layer with such id is nested in the object, and has such ID assigned.
- A number. In such case, it is the offset value to be reached upon scrolling.
  Any negative number shall be changed into a positive one (negative numbers aren't reachable within a scrolling setting).
scrollHow:
A number. Zero means, scroll vertically. Number 1 means, scroll horizontally.
amount:
A number, representing the amount to scroll at each iteration. A number widely exceeding the available scrollable length will result in an instantaneous scrolling to the top or bottom (or left or right) of the object to scroll.

Defaults to 20.
speed:
A number, representing the speed in milliseconds. Defaults to 20.

So a possible initialization meant to prepare a scrolling that inside a layer whose id is say wrapperLayer wants to scroll until the offset of a nested layer whose id is say nestedLayer, would look like:

var foo=new quickscroll('foo', 'wrapperLayer', 'nestedLayer');

Conversely, an expression like the following one would mean that within the BODY tag you are about to scroll till you find the offset of a nested layer:

var foo=new quickscroll('foo', 0/*default to BODY tag*/, 'nestedLayer');

Conversely a short expression like the following means that you are about to scroll the whole document till the bottom of it:

var foo=new quickscroll('foo');

Whereas the following expression would mean you are about to scroll the whole document from bottom till 305 pixels from the top (for some reason, you know that at 305 pixels there is something worth scrolling at):

var foo=new quickscroll('foo', 0/*default to BODY tag*/, 305);

As said, you can produce any of these initializations at any point in your document, within a script tag pair, as long as the placement where you insert such initialization is a placement that, if such initialization includes layer ids or grabbed nodes, is physically located at a place in your code situated after the closing of all of the involved layers tags.

If you want to scroll horizontally rather than vertically, pass the fourth argument as number 1.
If you need to perform both a vertical and horizontal scrolling at once, you shall have for each involved scrolling object to initialize two different variables as two distinct class instances, one with the fourth argument set to zero (or not set at all) and the other with the fourth argument set as 1, and then (as you shall promptly see) trigger the actual scrolling on both.

This class has only one public method, named scroll, and which can be used safely (that is, without unpredictable results) only if called after the document has been loaded: in fact the class stores values calling in javascript properties such as offsetTop, offsetHeight and other similar ones that a browser will represent correctly only once it has attained a full vision (parsing) of all the elements present in the given page.

So if you have initialized your class storing an instance of it into a variable named foo, the way to trigger the actual scrolling into the targeted layers would simply be:

foo.scroll();

Nothing else is required, such command can be issued also via javascript event handlers safely, and the script will understand by itself whether it has to scroll upward or downward (for a vertical scroller) or leftward or rightward (for an horizontal scroller setting) in order to attain the position passed upon initialization as the argument named scrollUntil.

Hint: you can nest inside your mark up tiny layers as if they were pins, like for instance SPAN tags with an id assigned, and whose content is none (empty tags): then you can instruct to scroll to them, if nearby them there is text you find relevant.
Css properties such as visibility, display do not interfere with the scrolling processes, regardless of which values these properties get assigned.
Please note that Opera seems to have problems with this script, whereas neither Firefox nor Netscape nor Internet Explorer have any.

If you are scrolling a layer, padding and margins applied via css should not affect the scrolling processes. However if a scrolling stalls, please consider that there could be some css interfering with it - if any such thing happens (it never did in my tests, but Murphy's law applies to programming as it does to all the rest), please consider arranging your scrollable layer in such a way that paddings and margins are applied to its wrapping layers rather than to the scrollable one. But, as said, this is just an over cautious note. In shorter words, be sure it is not your css, rather than the script, what seems to produce unexpetced behaviors, if any.

lines (with comments and blank lines):