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:
- It presents the
<div>
id
I pass to it,divID
, and that is has gotten the elementid
by presenting the correctele.id
. - The
<div>
is toggled todisplay: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>
2
Answers
You can't scroll to a
div
which isdisplay:none
!By moving the
toggle_reply(divID);
BEFORE theele.scrollIntoView();
, suddenly everything works the way I want it to.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 followingEdit: @CBroe is right about
display: none
. In your function replace linesele.scrollIntoView();
andele.scrollIntoView();
. You cannot scroll to an element that is not being displayed. Note that you can scroll to an element that isdisplay: hidden
buthidden
behaves differently thannone
.