Anchor tag workaround for navigating to specfic section in visualforce page (Scroll In to View)

Usually we use anchor tag in URL to show specific section in the page when it loads(https://SERVICE_CONSOLE_URL?PARAMS#SpecificSection). Unfortunately this is not supported in the service console as it is treated as parameter.

The same anchor tag works good outside the service console(https://NORMAL_SF_URL?PARAMS#SpecificSection

I tried scrollInToView JS function to resolve this issue. 

Approach:
1)     Using a parameter in the URL
2)     Uses SF function $CurrentPage.parameters
3)     If URL is not having parameter or wrong parameter then default to top of the page.
4)     Using parameter find the DOM element using document.getElementById or any function. I am using document.querySelector
5)     If DOM element is available then scroll the window till the element.

Usage:
1)      Visualforce page has elemId parameter in the URL.
2)     Value of the parameter can be TESTDIV55. (last digits can be between 1 to 100)
3)     Page will highlight that part of the page.

Please refer the code & demo given below

Code:
    <script language="JavaScript">
    window.onload = function() {
        var _elem = document.querySelector("[id$='{!IF(($CurrentPage.parameters.elemId <> null), $CurrentPage.parameters.elemId, $Component.mainPage)}']");
        if(_elem){
            _elem.scrollIntoView(true);
            _elem.style.border = "thick solid #0000FF";
        }
    };
    </script>


Demo:
                                                    Click Here




Comments