代码之家 › 专栏 › 技术社区 › EmmyS

如何使用JS跳转到页面中的特定位置?已尝试ScrollIntoView,但不工作

javascript

EmmyS · 技术社区 · 15 年前

我有一个用于讨论的PHP表单。每个消息都有自己的响应按钮,动态生成。我在按钮中使用javascript使响应表单在页面底部可见,但我一辈子都不能让页面在可见后跳到表单上。这对于有很多讨论的页面来说是个问题,因为有些用户可能不知道向下滚动,只会认为按钮不起作用。

以下是我的按钮代码:

<a href="#" onClick="changeVisibility(3,'responseForm')"><img src="images/reply.jpg" border=0 /></a>

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);
}

在我的表单中,我有一个DIV,其ID设置为responseform。单击按钮时,DIV确实可见,但ScrollIntoView不工作-我必须手动向下滚动才能看到它。有什么想法吗?

5 回复 | 直到 15 年前

Matthew Flaschen 15 年前

使用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,所以默认操作(转到)仍在发生。

Gert Grenander Keiron Lowe 15 年前

用户window.location.hash重定向到一个id/anchor。例如。

HTML:

<p id="youranchor">bla bla</p>

JavaScript:

window.location.hash='youranchor';

emmys-这个代码确实有效。下面是一个完整的例子:

<!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>

将其放入文件中并在浏览器中测试该文件。

dhh 15 年前

嗯,你可以试着用 document.body.scrollTop = document.getElementById(elementId).offsetTop; (未经测试)

dhh 15 年前

嗯,下面的javascript代码工作起来很有魅力:

<script type="text/javascript">
function scrollToPos() {
    var el = document.getElementById("abc");
    el.style.visibility = "visible";
    el.style.display = "block";
    el.scrollIntoView(true);
}
</script>

单击此链接时 <a href="#" onclick="scrollToPos();return false;">scroll</a><br /> 下面的DIV GET将可见并滚动到视图中(在IE6、IE8、FF3.6.3、Google Chrome 4.1和Opera 10.5中测试,全部在Windows上)

<div id="abc" style="height:100px;color:red;font-weight:bold;visibility:hidden;display:none;">
    abc
</div>

EmmyS 15 年前

好吧,我终于找到了一些有用的东西。我一直在做石器时代教我做的事情:当在需要链接的地方使用javascript调用时,使用

a href="#" onClick="yourFunction()"

显然,如果我只是使用

a href="javascript:yourFunction()"

它工作正常。这可能被视为或不被视为良好的实践,但它是有效的。