Javascript Question posted in
A very good W3school tutorial can be found here.

scroll to a <div> using plain javascript

What I’m trying to do is have a page scroll to a particular <div> when it reloads after the user has submitted an incomplete form.

The function commentScroll(divID) is being called–I know this because the alert appears on page-load, and I know that it knows what <div> to scroll to because:

  1. It presents the <div> id I pass to it, divID, and that is has gotten the element id by presenting the correct ele.id.
  2. The <div> is toggled to display:block (and no other <div> is).

But even though commentScroll(divID) is being called and knows what <div> to scroll to, it is not scrolling to the <div>.

I have confirmed that - is not a reserved character and should work as a <div> <id>, so this isn’t the problem.

I have confirmed that ele.scrollIntoView(); ought to work because I use it in function eleScroll(divID) and it works there.

Could someone tell me why it is not?

Thanks in advance!

<html>

<script type="text/javascript">

    function commentScroll(divID)
    {
        bool_debug = true; // 0;
        const ele = document.getElementById(divID);
        if (bool_debug) { alert("line 126:nn" + "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>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    You can't scroll to a div which is display:none!

    By moving the toggle_reply(divID); BEFORE the ele.scrollIntoView();, suddenly everything works the way I want it to.


  2. 0

    If I understand you correctly, you want to scroll to a specific <div> when the page reloads (in your case after a form submission).

    For that, you would need to wait for the page to load. Scrolling somewhere before the page loads would be unreliable at best since the position of elements can still change or the element in question might not have been loaded at all yet.

    You can use window.onload. In your case replace the <script> tag at the bottom of your page with the following

    window.onload = function() {
    commentScroll("reply-97-1");
}

    Edit: @CBroe is right about display: none. In your function replace lines ele.scrollIntoView(); and ele.scrollIntoView();. You cannot scroll to an element that is not being displayed. Note that you can scroll to an element that is display: hidden but hidden behaves differently than none.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search