0

每次我在我的网站上开始使用 JavaScript 时，它都会将我滚动到页面顶部，我该如何防止这种情况发生？该网页正在连接到一个外部 .js 文件，该文件通常从我的 .php 文件中获取信息（还没有 SQL 连接）。

所有 JS 函数都可以更改页面上的内容，而无需重新加载页面。所以像 -

document.getElementById('element').innerHTML=xmlhttp.responseText;

这将是一场游戏，并希望在 Facebook 上！自动“捕捉”回到页面顶部是非常乏味和烦人的。有没有办法防止这种情况？

编辑：为了清楚起见。（非常感谢您的回复顺便说一句！）

<a href="#" onclick="showData(1);"><img src="./images/qstata.png" /></a> 

function showData(str)
{
if (str=="")
  {
  document.getElementById("currentactivity").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("currentactivity").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","index.php?q="+str,true);
xmlhttp.send();
}

这是我正在使用的代码示例之一，我还在学习，所以我在编写代码时使用了很多不同的样式。下面是另一个例子。

function missionPop()
{
  var iframe= document.getElementById('missioniframe')
  iframe.style.visibility='visible';
}

当我等待回复时，我要去试试你的建议 pebbl！

4

2 回答 2

2

正如我在上面的评论中所说，如果元素的内容被替换，浏览器将通过滚动到该元素的顶部来进行补偿。

您可以通过为元素分配一个固定的高度来解决这个问题，从而防止它在内容更改时调整大小。或者可能通过将您的新信息附加到元素，而不是替换它（如果这不会破坏更新点）。

编辑：

添加return false;到函数的末尾。这将抵消散列链接的影响。阅读 pebbl 的答案以获取更多信息。

于 2012-08-28T13:21:40.980 回答
1

跳跃标签

通过它的声音，您正在将 JavaScript 事件添加到#hashtag其 href 中的链接：

<a href="#hashtag">Click Me</a>

调用 undefined#hastag会将滚动条跳回页面顶部。无论您使用什么来应用事件侦听器功能，都必须取消单击事件以停止跳转。

问题

以下代码将触发您遇到的问题：

<a href="#" id="click_link">Click me</a>

<script type="text/javascript">

  function click_me(){
    document.getElementByTagName('body')[0].style.background = '#F00';
  }

  window.onload = function(){
    document.getElementById('click_link').onclick = click_me;
  }

</script>


解决方案

您所要做的就是添加以下内容以防止在链接上继续点击，这将阻止#hashtag被触发，从而阻止页面跳转：

<a href="#" id="click_link">Click me</a>

<script type="text/javascript">

  function click_me(){
    document.getElementByTagName('body')[0].style.background = '#F00';
    return false; /// return false tells the event to cancel
  }

  window.onload = function(){
    document.getElementById('click_link').onclick = click_me;
  }

</script>

但这完全取决于您用来定义事件处理程序的确切内容。


取消活动

...使用内联处理程序

内联处理程序应被视为好像 onclick 属性将呈现为函数的主体部分。ie在评估时click_me();return false;实际上会转化为存在。function(){click_me();return false;}这就是为什么像onclick="click_me"你所做的只是访问一个变量而不是触发一个函数这样的事情不起作用的原因。

<a href="#" onclick="click_me();return false;">Click Me</a>
<a href="#" onclick="return click_me();">Click Me</a>


...使用 js 属性处理程序

使用属性处理程序，您将提供整个函数，而不仅仅是主体，但主体仍然相同。return false;是你所需要的全部。

<a href="#" id="my_link">Click Me</a>

<script type="text/javascript">
  window.onload = function(){
    document.getElementById('my_link').onclick = function(){
       return false;
    };
  }
</script>


...带有 js 事件集合

迄今为止，事件集合是在 JavaScript 中设置和管理事件的最佳方式。这样做的主要原因是您可以轻松地将多个事件处理程序应用于同一元素（不知道已经存在哪些其他处理程序），并且您可以将代码与标记分开。阻止事件继续进行的主体再次类似，return false;将具有相同的效果。

<a href="#" id="my_link">Click Me</a>

<script type="text/javascript">

  function click_me(){
    return false;
  }

  window.onload = function(){
    var elm = document.getElementById('my_link');
    if ( elm.attachEvent ) {
      elm.attachEvent('onclick', click_me);
    }
    else if( elm.addEventListener ) {
      elm.addEventListener('click', click_me);
    }
  }

</script>
于 2012-08-28T13:22:35.467 回答