跳转标签

Question

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

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

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

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

编辑：为了清楚起见，请问。（非常感谢btw的响应！）

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

Answer 1

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

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

修改

将return false;添加到您的函数末尾。这将否定哈希链接的影响。阅读pebbl的答案以获取更多信息。

Answer 2

跳转标签

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

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

调用未定义的#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属性将呈现为函数的正文部分。即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>

如何防止JavaScript不必要地更改浏览器位置

2 个答案:

跳转标签

问题

解决方案

取消活动

...使用内联处理程序

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

...使用js事件集合