Mimicking Form Anchors with the scrollto() Method

In response to a forum request at Symantec Connect, I came up with a method of mimicking the functionality of an html anchor tag on a Workflow form.  What this does, functionally, is scrolls a form to a specific position.

scrollto

So this one is pretty simple – you basically set a Control Id on an element that we will call the “anchor” element, and then reference that element and get the position.  Here’s the javascript set to an onclick event in the demo.


var labeltwo = document.getElementById('Label2');
window.scrollTo(0, parseInt(labeltwo.style.top));

This is repeated for each label in the demo.  At the bottom, to get back to the top, we simply use this onclick javascript:


window.scrollTo(0, 0);

Easy enough!

As a side note – “window.scrollTo()” sets the working context to “window”, being the form itself.  If you need to jump around inside a specific scrolling element (such as a ListSelect component), set the context properly to do so.  As an example, with a ListSelect component with a Control Id of “ListSelect1”, we would get the element first:


var list1 = document.getElementById('ListSelect1');

Then, set the context to only the ListSelect element:


list1.scrollTo(0, 0);


Check the Demos page for the Workflow demo project.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s