ASP页面+ Javascript：如何隐藏元素并获取其真实位置？

Question

I have an javascript, that find an element (panel), gets it position, and scrolls page to that position. The javascript function is called on button click. everything worsk fine, when the panel is Visible=true; But on the load of the page, the panel must be not visible, to the user. When the panel is Visible = false, the javascript function doesn't works because the panel doesn't exists on the page. when the panel is style="display:none" it exists, is not visible to the user, but it's position is not it's real position. when the panel is style="visibility:hidden" the panel exists, is on the real position, but there is a big blank space on the page, where the panel is hidden.

How to make the panel invisible to the user without the blank space on the page, and get its real position on the page?

edit: my solution + code -

well, I made it working, but there must be better solution. here's the code

<script type="text/javascript">
        function elementPosition(obj) {            
            var curleft = 0, curtop = 0;
            if (obj.offsetParent) {
                curleft = obj.offsetLeft;
                curtop = obj.offsetTop;

                while (obj = obj.offsetParent) {
                    curleft += obj.offsetLeft;
                    curtop += obj.offsetTop;
                }
            }
            return { x: curleft, y: curtop };
        }

        function ScrollToControl(id) {
            jid = id;
            var elem = document.getElementById(jid);
//here I set the display = 'block', and I also set this in button_click event
//when I didn't set it also in button_click event, I get the right panel position
//but the panel remains invisible
            elem.style.display= 'block'; 
            var scrollPos = elementPosition(elem).y;
            window.scroll(0, scrollPos);
            }
           </script>

the button on the page:

<asp:Button ID="btnClientDossiers_EMAIL" runat="server" CssClass="button" Enabled="False"
                            Text="EMAIL" OnClick="btnClientDossiers_EMAIL_Click" />

codebehind

 Page_Load
    {
 //how can I dynamically get the ctl00_ContentPlaceHolder?
// Or will the client name of plEMAIL always start with ctl00_ContentPlaceHolder?
    btnClientDossiers_EMAIL.Attributes.Add("onclick", " return 
    ScrollToControl('ctl00_ContentPlaceHolder_plEMAIL');");
    }

    protected void btnClientDossiers_EMAIL_Click(object sender, EventArgs e)
            {
                plEMAIL.Attributes.Add("style", "display:block");
            }

Answer 1

Please post your code so we can give you a more helpful answer, but I'm going suggest one way that you may be able to achieve what you are after. Try loading the page with the div(s) set to style="visibility:hidden;" , and then get their vertical position into a global variable or a data-attribute of the element, and then immediately set the div's style to style="display:none;" .

You should then be able to use these position values in your scroll function.