使用纯 JavaScript 滚动到 <div>

问题描述 投票：0回答：1

我想做的是在用户提交不完整的表单后重新加载时让页面滚动到特定的

<div>
。

函数 

commentScroll(divID)
正在被调用——我知道这一点是因为 
alert
出现在页面加载时，并且我知道它知道要滚动到什么 
<div>
，因为：

  1. 它呈现了我传递给它的
    <div>
    id
    ，
    divID
    ，即通过呈现正确的
    id
    获得了元素
    ele.id
    。
  2. <div>
    已切换为 
    display:block
    （并且没有其他 
    <div>
    ）。

但是，即使 

commentScroll(divID)
被调用并且知道要滚动到什么 
<div>
，它也不会滚动到 
<div>
。

我已经确认 

-
不是保留字符，应该用作 
<div>
<id>
，所以这不是问题。

我已经确认 

ele.scrollIntoView();
ought 可以工作，因为我在 
function eleScroll(divID)
中使用它并且它在那里工作。

有人可以告诉我为什么不是吗？

提前致谢！

<html>

<script type="text/javascript">

    function commentScroll(divID)
    {
        bool_debug = true; // 0;
        const ele = document.getElementById(divID);
        if (bool_debug) { alert("line 126:\n\n" + "divID = \"" + divID + "\""+ "\n" + "ele.id = \"" + ele.id + "\""); }
        ele.scrollIntoView();
        toggle_reply(divID);
    } // function commentScroll(eleDiv)

    function eleScroll(divID) 
    {
        const ele = document.getElementById(divID);
        ele.scrollIntoView();
    } // function eleScroll(eleDiv)

    function toggle_reply(id) 
    {
        var array_reply = document.getElementsByClassName("div-reply");
        for(var count_reply=0; count_reply<array_reply.length; count_reply++)
        {
            if (array_reply[count_reply].id != id) { array_reply[count_reply].style.display = "none"; }
        } // for(var count_reply=0; count_reply<array_reply.length; count_reply++)

        var div = document.getElementById(id);
        div.style.display = div.style.display == "none" ? "block" : "none";
    } // function toggle_reply(id)


</script>

<body>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<div id="reply-97-1" class="div-reply" style="display:none; margin-bottom:5px; margin-left:22px;">
    <table border="1" style="margin-bottom:5px; margin-left:26px; border:black thin solid; ">
        <tr>
            <td colspan="2">test 1</td>
        </tr>
        <tr>
            <td align="left">P. James Norris - 9:01 am Thu 18 Jan 2024</td>
            <td align="right"><button onclick="toggle_reply('reply-97-1')">reply</button></td>
        </tr>
    </table><!-- comment -->
    <form name="comment" action="" method="post">

        <input name="_id_blog" type="hidden" value="97-1" >

        <table style="width:300px;">
            <tr>
                <td colspan="2">
                    <textarea id="comment_in_97-1" name="comment" name="" rows="7" cols="50" 
                        placeholder="type your comment - 2500 characters"        
                        onchange="countChars('comment_in_97-1', 'count_comment_97-1', 2500);" 
                        onfocus="countChars('comment_in_97-1', 'count_comment_97-1',  2500);"
                        onkeydown="countChars('comment_in_97-1', 'count_comment_97-1',  2500);" 
                        onkeyup="countChars('comment_in_97-1', 'count_comment_97-1',  2500);"
                    ></textarea>
                    <br />
                    <span style="font-size:11px;">Characters Remaining: <span id="count_comment_97-1" style="color:black;"></span></span>
                </td>
            </tr>
            <tr>
                <td>
                    <input id="nameFirst-97-1" name="nameFirst" type="text" 
                        placeholder="first name - 25 characters" value="" - 50 characters        
                        onchange="countChars('nameFirst-97-1', 'count_nameFirst-97-1', 25);" 
                        onfocus="countChars('nameFirst-97-1', 'count_nameFirst-97-1',  25);"
                        onkeydown="countChars('nameFirst-97-1', 'count_nameFirst-97-1',  25);" 
                        onkeyup="countChars('nameFirst-97-1', 'count_nameFirst-97-1',  25);"
                    >
                </td>
                <td>
                    <input id="nameLast-97-1" name="nameLast" type="text" 
                        placeholder="last name - 25 characters" value="" - 25 characters         
                        onchange="countChars('nameLast-97-1', 'count_nameLast-97-1', 25);" 
                        onfocus="countChars('nameLast-97-1', 'count_nameLast-97-1',  25);"
                        onkeydown="countChars('nameLast-97-1', 'count_nameLast-97-1',  25);" 
                        onkeyup="countChars('nameLast-97-1', 'count_nameLast-97-1',  25);"
                    >
                </td>
            </tr>
            <tr>
                <td>
                    <span style="font-size:11px;">Characters Remaining: <span id="count_nameFirst-97-1" style="color:black; font-size:12px;"></span></span>
                </td>
                <td>
                    <span style="font-size:11px;">Characters Remaining: <span id="count_nameLast-97-1" style="color:black; font-size:12px;"></span></span>  
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input id="email-97-1" name="email" type="text" 
                        placeholder="email - 50 characters" value="" - 50 characters         
                        onchange="countChars('email-97-1', 'count_email-97-1', 50);" 
                        onfocus="countChars('email-97-1', 'count_email-97-1',  50);"
                        onkeydown="countChars('email-97-1', 'count_email-97-1',  50);" 
                        onkeyup="countChars('email-97-1', 'count_email-97-1',  50);"
                    >
                    <br />
                    <span style="font-size:11px;">Characters Remaining: <span id="count_email-97-1" style="color:black; font-size:12px;"></span></span>
                    <br />      
                    <em>Only your name, not your email address, will appear in the comments area.</em>
                    <br />
                    <input name="submit" type="submit" value="post">
                    
                </td>
            </tr>
        </table>
    </form> <!-- name="comment-entry" -->
</div> <!-- class="div-reply" -->

<script>commentScroll("reply-97-1"); </script>

</body>

</html>
javascript vertical-scrolling
1个回答
0
投票

如果我理解正确，您希望在页面重新加载时滚动到特定的

<div>
（在您的情况下是在表单提交后）。

为此，您需要等待页面加载。在页面加载之前滚动某处充其量是不可靠的，因为元素的位置仍然可以改变，或者有问题的元素可能根本还没有加载。

您可以使用

window.onload
。在您的情况下，将页面底部的标签替换为以下内容

window.onload = function() {
    commentScroll("reply-97-1");
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.