如何使用JS跳转到页面中的特定位置？ 尝试scrollIntoView，无法正常工作
[英]How to use JS to jump to a specific place in a page? Tried scrollIntoView, not working
问题描述
I have a PHP form for discussions. 
我有一个用于讨论的PHP表单。 Each message has its own response button, which is dynamically generated. 每条消息都有自己的响应按钮，该按钮是动态生成的。 I'm using javascript in the button to make a response form visible at the bottom of the page, but I can't for the life of me get the page to jump down to the form once it's visible. 我在按钮中使用javascript来在页面底部显示一个响应表单，但是我不能在我的生活中让页面一旦可见就跳转到表单。 This is a problem for pages that have a lot of discussions on it, as some users may not know to scroll down and will just think the button didn't work. 对于有很多讨论的页面来说，这是一个问题，因为有些用户可能不知道向下滚动，只会认为按钮不起作用。
Here's what I have now for my button code: 这是我现在的按钮代码：
<a href="#" onClick="changeVisibility(3,'responseForm')"><img src="images/reply.jpg" border=0 /></a>
The changeVisibility function looks like this: changeVisibility函数如下所示：
function changeVisibility(parentID, elementID) {
document.getElementById(elementID).style.visibility="visible";
document.forms[0].parent_id.value=parentID;
var el = document.getElementById(elementID);
el.scrollIntoView(true);
}
In my form, I have a div whose id is set to responseForm. 在我的表单中，我有一个div，其id设置为responseForm。 When clicking the button, the div does become visible, but the scrollIntoView is not working - I have to manually scroll down to see it. 单击按钮时，div确实可见，但scrollIntoView不起作用 - 我必须手动向下滚动才能看到它。 Any ideas? 有任何想法吗？
5 个解决方案
解决方案1
3 2010-05-14 21:13:49
Use window.location.hash 使用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>
EDIT: I think the issue before was that you weren't returning false, so the default action (going to #) was still occurring. 编辑：我认为以前的问题是你没有返回false，所以默认动作（转到＃）仍在发生。
解决方案2
1 2010-05-14 21:16:39
User window.location.hash to redirect to an ID/anchor. 用户window.location.hash重定向到ID /锚点。 Eg 例如
HTML: HTML：
<p id="youranchor">bla bla</p>
JavaScript: JavaScript的：
window.location.hash='youranchor';
EmmyS - This code does work. 艾美奖 - 这段代码确实有效。 Here's a complete example for you: 这是一个完整的例子：
<!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>
Put it into a file and test the file in your browser. 将其放入文件并在浏览器中测试该文件。
解决方案3
0 2010-05-14 21:17:41
Hmm, you could try using document.body.scrollTop = document.getElementById(elementId).offsetTop; 嗯，你可以尝试使用document.body.scrollTop = document.getElementById(elementId).offsetTop; (not tested) （未测试）
解决方案4
0 2010-05-15 13:36:39
Hum, the following JavaScript code works like a charm: 嗯，以下JavaScript代码就像一个魅力：
<script type="text/javascript">
function scrollToPos() {
var el = document.getElementById("abc");
el.style.visibility = "visible";
el.style.display = "block";
el.scrollIntoView(true);
}
</script>
When clicking this link <a href="#" onclick="scrollToPos();return false;">scroll</a><br /> the following div get's gets visible and scrolls into view (tested in IE6, IE8, FF3.6.3, Google Chrome 4.1 and Opera 10.5, all on windows) 单击此链接时<a href="#" onclick="scrollToPos();return false;">scroll</a><br />以下div get可见并滚动到视图中（在IE6，IE8，FF3中测试） .6.3，谷歌Chrome 4.1和Opera 10.5，全部在Windows上）
<div id="abc" style="height:100px;color:red;font-weight:bold;visibility:hidden;display:none;">
abc
</div>
解决方案5
0 已采纳 2010-05-16 20:41:09
OK, I finally found something that works. 好的，我终于找到了有用的东西。 I've been doing what I was taught to do in the Stone Age: when using javascript calls in what needs to be a link, use 我一直在做我在石器时代所做的教训：当在需要的链接中使用javascript调用时，使用
a href="#" onClick="yourFunction()"
Apparently it's the # that's killing things for me; 显然，这对我来说是在扼杀事物的＃。 if I just use 如果我只是用
a href="javascript:yourFunction()"
it works correctly. 它工作正常。 This may or may not be considered good practice anymore, but it works. 这可能会或可能不会被视为良好做法，但它确实有效。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.