Video: 005 – Restore screen position after refresh

Picture a Report and Form pages used to edit records. The Report is an Interactive Report and the edit page is Modal. When the modal closes the IR refreshes, but also, the page jumps to the top after the refresh. This happens in APEX If your report is small this is never an issue, but with longer reports, this is pretty annoying to the user.

I wouldn’t be surprised if this gets fixed in a not so distant new version of APEX, but in the meantime, here’s a simple workaround. Oh and if you have any recommendations, improvements, questions, or suggestions I would love to hear about them.

Check out the demo.

I think my friend Gemma Wood first told me about this fix. I couldn’t find the actual code she shared with me, but the basic approach is pretty simple. Save the scroll position of the page before you open the modal page. Restore the scroll position after the refresh.

Here are the more detailed steps or, if you like, watch the video below:

  • Add a JavaScript variable to your page (use the “Function and Global Variable Declaration” field). We’ll use it to remember our scroll position.

  • Add a DA on click of the link used to invoke a modal page. It will save the current scroll position, so call it “Save Scroll Position”

  • Create an “After Refresh” Dynamic Action to restore the postion.

005 – Save screen position after refresh from Jorge Rimblas on Vimeo.

Hi, I'm Jorge Rimblas. Father, husband, photographer, Oraclenerd, Oracle APEX expert, Oracle ACE, coffee lover, car guy, gadget addict, etc... I'm a Senior APEX Consultant with Insum Solutions, a consulting firm specialized in Oracle databases and the APEX development tool. I have worked with Oracle since 1995 and done eBusiness Suite implementations and customizations. Nowadays I specialize almost exclusively in Oracle APEX.

Posted in APEX, Classic Reports, Interactive Reports, JavaScript, Oracle, Video, Web
13 comments on “Video: 005 – Restore screen position after refresh
  1. Peter says:

    You can do the same for report regions with a scrollbar. Just use the region static ID as the jQuery selector.

  2. Bhavin Adhvaryu says:

    Hi Jorge,

    Nice one..! However I tried same way as you described in your video but doesn’t work. Could you please help?

  3. fridolin says:

    Hi Jorge,
    what happens when one or more records will be deleted by another user when editing the record ? The position might be wrong ?

    • Hi Fridolin,
      Thank you for the question. Yes, if one or multiple records were deleted, in a sort order higher than the user’s record position.

      tr.highlight td {
      background-color: #ff0;

      // Add this as another JavaScript true action after saving the position
      // Un-highlight previous rows
      // Highlight the selected row

      I’ve added this to the app now.

  4. David says:

    Hi Jorge,

    Thanks for the help with this.

    I had to make a few minor modifications to get it to work for me.

    Function and Global Variable Declaration:
    var savepos = localStorage.getItem(“savepos”);

    Save Scroll Position Javascript Code:
    savepos = $(window).scrollTop();
    localStorage.setItem(“savepos”, savepos);

    • Hi David,
      Thanks for the feedback. That’s an interesting change to use local storage. You were probably navigating to a different page. I’m glad you shared this solution.

  5. Yokanand says:

    Hi Jorge,

    I am working on interactive report in Apex. My interactive report has pagination of size 10. This report has page link in one of the columns and opens a Modal dialog on click. I have a refresh region action on closing this modal dialog and the screen always goes to the first section of pagination. For Ex: I have pagination of 10 and when i am in section 10-20 and work on a report and close the modal dialog, the screen goes to first section (1- 10). I do not know how to stay in the same pagination section after refresh. Is there a way to achieve this?


  6. Amaya says:

    If I need to capture x e y, because my reports have more columns?
    How can do that?

    • Interesting problem. I haven’t explored side scrolling.
      There’s a jQuery .scrollLeft(); as a counter part to scrollTop
      However, on UT for example, the window may not be scrolling sideways. Your report may be inside a div with overflow. It may take some research and you may need to use a different selector.

I love comments, write me a line