javascript - 防止点击移动到顶部

Question

一直在寻找解决我的问题的方法，以阻止我的页面在单击链接时滚动到顶部。我的网站上有一个侧边栏，每次您单击链接时，页面都会移至顶部。这是侧面导航:

<ul class="sidenav" <?php if(isset($p)) echo "id='".strip_tags($p)."'"; ?>>
 <li id="a"><a href="?p=a">A</a></li>
 <li id="b"><a href="?p=b">B</a></li>
 <li id="c"><a href="?p=c">C</a></li>
</ul>

我正在使用 jquery-1.11.3.min.js 和 bootstrap-3.3.7.js。是否存在任何冲突，为什么它滚动到顶部？我应该采取什么措施来防止这种情况发生？我见过一些带有 #! 的解决方案和类似的，但它也会阻止链接加载，我不希望这种情况发生。

Answer 1

不幸的是，单击该 href=?p=a 您实际上是在使用参数进行 GET 调用，因此页面将被刷新。

您可以将有关垂直位置的信息document.documentElement.scrollTop保存在 sessionStorage 中并在页面刷新时使用它重置旧位置。

示例:

...
<script> 
$( document ).ready(function(){
  var verticalPos=sessionStorage.getItem("verticalPos");
  if (verticalPos)
    document.documentElement.scrollTop=verticalPos;
 });

function savePos(){
  sessionStorage.setItem('verticalPos', document.documentElement.scrollTop);
  return true;
}
</script>
...

 <li id="a"><a href="?p=a" onclick="javascript:savePos()">A</a></li>