Javascript 如何使用JS跳转到页面中的特定位置？已尝试滚动到视图，不工作
我有一个用于讨论的PHP表单。每条消息都有自己的响应按钮，该按钮是动态生成的。我在按钮中使用javascript使响应表单在页面底部可见，但我无法让页面在可见后跳转到表单。这对于有很多讨论的页面来说是个问题，因为一些用户可能不知道向下滚动，只会认为按钮不起作用 下面是我现在的按钮代码：Javascript 如何使用JS跳转到页面中的特定位置？已尝试滚动到视图，不工作,javascript,Javascript,我有一个用于讨论的PHP表单。每条消息都有自己的响应按钮，该按钮是动态生成的。我在按钮中使用javascript使响应表单在页面底部可见，但我无法让页面在可见后跳转到表单。这对于有很多讨论的页面来说是个问题，因为一些用户可能不知道向下滚动，只会认为按钮不起作用 下面是我现在的按钮代码： <a href="#" onClick="changeVisibility(3,'responseForm')"><img src="images/reply.jpg" border=0 /&g
<a href="#" onClick="changeVisibility(3,'responseForm')"><img src="images/reply.jpg" border=0 /></a>
在我的表单中，有一个div的id设置为responseForm。单击按钮时，div确实变为可见，但scrollIntoView不工作-我必须手动向下滚动才能看到它。有什么想法吗？使用window.location.hash
function changeVisibility(parentID, elementID) {
document.getElementById(elementID).style.visibility="visible";
document.forms[0].parent_id.value=parentID;
window.location.hash = '#' + elementID;
return false;
}
<a href="#" onClick="return changeVisibility(3,'responseForm')"><img src="images/reply.jpg" border=0 /></a>
编辑：我认为之前的问题是，您没有返回false，因此将要执行的默认操作仍在发生 使用window.location.hash
function changeVisibility(parentID, elementID) {
document.getElementById(elementID).style.visibility="visible";
document.forms[0].parent_id.value=parentID;
window.location.hash = '#' + elementID;
return false;
}
<a href="#" onClick="return changeVisibility(3,'responseForm')"><img src="images/reply.jpg" border=0 /></a>
编辑：我认为之前的问题是，您没有返回false，因此将要执行的默认操作仍在发生 User window.location.hash重定向到ID/锚点。例如 HTML: 艾美奖-这个代码确实有效。下面是一个完整的示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Some title</title>
<script type="text/javascript">
function jumpToParagraph() {
window.location.hash='paragraphjump';
}
</script>
</head>
<body>
<p onclick='jumpToParagraph();'>Jump to the paragraph at the end! [version 1]</p>
<p><a href="javascript:jumpToParagraph();">Jump to the paragraph at the end! [version 2]</a></p>
<p style="height: 1500px;">Some nonsense</p>
<p id="paragraphjump">You made the jump</p>
</body>
</html>
将其放入文件并在浏览器中测试该文件。User window.location.hash可重定向到ID/锚定。例如 HTML: 艾美奖-这个代码确实有效。下面是一个完整的示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Some title</title>
<script type="text/javascript">
function jumpToParagraph() {
window.location.hash='paragraphjump';
}
</script>
</head>
<body>
<p onclick='jumpToParagraph();'>Jump to the paragraph at the end! [version 1]</p>
<p><a href="javascript:jumpToParagraph();">Jump to the paragraph at the end! [version 2]</a></p>
<p style="height: 1500px;">Some nonsense</p>
<p id="paragraphjump">You made the jump</p>
</body>
</html>
将其放入文件并在浏览器中测试该文件。嗯，您可以尝试使用document.body.scrollTop=document.getElementByIdelementId.offsetop；未测试嗯，您可以尝试使用document.body.scrollTop=document.getElementByIdelementId.offsetTop；未经测试哼，以下JavaScript代码工作起来很有魅力：
<script type="text/javascript">
function scrollToPos() {
var el = document.getElementById("abc");
el.style.visibility = "visible";
el.style.display = "block";
el.scrollIntoView(true);
}
</script>
<div id="abc" style="height:100px;color:red;font-weight:bold;visibility:hidden;display:none;">
abc
</div>
嗯，下面的JavaScript代码工作起来很有魅力：
<script type="text/javascript">
function scrollToPos() {
var el = document.getElementById("abc");
el.style.visibility = "visible";
el.style.display = "block";
el.scrollIntoView(true);
}
</script>
<div id="abc" style="height:100px;color:red;font-weight:bold;visibility:hidden;display:none;">
abc
</div>
好的，我终于找到了一个有效的方法。我一直在做石器时代教我做的事情：在需要链接的地方使用javascript调用时，使用
a href="#" onClick="yourFunction()"
a href="javascript:yourFunction()"
它工作正常。这可能被认为是好的做法，也可能不再被认为是好的做法，但它是有效的。好的，我终于找到了有效的方法。我一直在做石器时代教我做的事情：在需要链接的地方使用javascript调用时，使用
a href="#" onClick="yourFunction()"
a href="javascript:yourFunction()"
它工作正常。这可能被认为是好的做法，也可能不再被认为是好的做法，但它仍然有效。不，它仍然与我的原始代码做的一样-闪烁一秒钟，然后返回到原始的消息显示。我在Firefox 3.6.3、Chrome和IE8中进行了测试。很多年后，我发现了这个线程！。使用正在执行其他任务的函数，除了调用scrollIntoView return false之外，还修复了一个问题，即元素会立即滚动到视图中，然后窗口会滚动到页面顶部，这可能是由于href=.Nope，仍然和我原来的代码做的一样-闪烁一秒钟，然后返回到最初的消息显示。我在Firefox 3.6.3、Chrome和IE8中进行了测试。很多年后，我发现了这个线程！。除了调用scrollIntoView return false之外，还有一个正在执行其他任务的函数，它修复了一个问题，即元素会立即滚动到视图中，然后窗口会滚动到页面顶部，这可能是由于href=.Nope的缘故，但似乎什么也没做。更改可见性的代码可以正常工作，但不会发生其他事情。没有错误。我已经在Firefox 3.6.3、Chrome和IE8中进行了测试。不，似乎什么都没做。更改可见性的代码可以正常工作，但不会发生其他事情。没有错误。我已经在Firefox 3.6.3、Chrome和IE8中进行了测试。与上面第一个答案中列出的代码相同；什么都没做。好吧，再试一次，这里有什么奇怪的或者不奇怪的；我使用CSS和javascript已经很久了：如果我把onClick事件放在段落标记中，它就可以正常工作。如果我尝试将它放在href标记中，如在a href=onClick='jumpToParagraph'中一样，它将不起作用。将它放在除href以外的任何标记中的问题是，除非您使用href，否则浏览器不会将光标更改为手形，因此许多人会认为您应该单击的东西是不可单击的，即使它应该是。关于如何使其在href标记中工作，有什么想法吗？不起作用的原因是，通过单击，浏览器使用href中的作为其锚定链接。。。这就导致了现在的他
重新。你必须在href中使用javascript:如果你想让它工作，请参阅上面我编辑过的版本；什么都没做。好吧，再试一次，这里有什么奇怪的或者不奇怪的；我使用CSS和javascript已经很久了：如果我把onClick事件放在段落标记中，它就可以正常工作。如果我尝试将它放在href标记中，如在a href=onClick='jumpToParagraph'中一样，它将不起作用。将它放在除href以外的任何标记中的问题是，除非您使用href，否则浏览器不会将光标更改为手形，因此许多人会认为您应该单击的东西是不可单击的，即使它应该是。关于如何使其在href标记中工作，有什么想法吗？不起作用的原因是，通过单击，浏览器使用href中的作为其锚定链接。。。而且它什么都没有。如果你想让它工作，你必须在href中使用javascript:查看上面我编辑的版本。这个版本也不工作。显然有一些奇怪的事情发生了，但我已经直接复制了你的代码，就像我复制了所有其他答案一样，甚至重命名了我的div以匹配你的，以防万一。它仍然只是短暂地闪烁并取消隐藏表单，但不会跳转到表单。奇怪的是Firebug没有给我任何错误；它只是没有做你们都说它应该做的事情。那个也不起作用。显然有一些奇怪的事情发生了，但我已经直接复制了你的代码，就像我复制了所有其他答案一样，甚至重命名了我的div以匹配你的，以防万一。它仍然只是短暂地闪烁并取消隐藏表单，但不会跳转到表单。奇怪的是Firebug没有给我任何错误；它只是没有做你们都说它应该做的事情。