Press "Enter" to skip to content

Scroll to top button

3

Various preferences of customers define the layout of their forms. Some prefer the forms with tabs, others – everything on one page. Quite often you can have big forms and tabs all together. At the end of each tab users have to scroll to top every time, if they want to switch to the next tab.

In the post How to place a view above tabs  I already described, how you can move certain views above the tabs. But here I will show you, how to create a ‘Scroll to top’ button, that appears only, when you start scrolling down.

For this you need to add a bit of JavaScript somewhere on the Form. If you do not know, how to add Javascript or CSS to your form, please, refer to How to add JavaScript on Smartforms.

1. Adding a Scroll to top button

In order to achieve that, you need to add a bit of css on the form. Please, copy the following content (both CSS and JavaScript) into the Data Label. You insert all this into the same literal Data Label.

After you open the form, you will not see anything. The Scroll to top button will appear only, when you scroll down a bit. Using this line of code in the JavaScript, you can control, when this button should appear:

if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20)...

And you can click the image below to see the result:

2. Adding a Scroll to top icon

In order to add an icon instead of the button, you need to modify slightly the HTML code of the button, that is created in the first line of the script. I will be using a standard image K2 App Arrow Up from the image control SmartObject, that is available for all K2 Five installations. If you do not see the image or see another image or you want to use your own image, you need to get the ID of your image and update the ImID parameter of the src attribute, that I inserted into the final JavaScript:

<imgsrc="/Designer/Image.ashx?ImID=10051">

And this is how my final JavaScript looks like:

And this is how the final result looks like:

  1. Craig Brookhart Craig Brookhart

    hi

    this is great, where do I find the image id for the button?

    • Konstantin Fukszon Konstantin Fukszon

      Hi Craig,
      You can get it from the System SMO, that is bound to picture control. You can find it here: System > Controls > Image > Forms Image SMO.
      BR
      Konstantin

  2. Thriveni Thriveni

    really awesome. Thank you .

Leave a Reply

Your email address will not be published. Required fields are marked *

nineteen − eleven =