Question

一直在搜索我的问题的解决方案，以防止我的页面在点击链接时滚动到顶部。我在我的网站上有这个侧边栏，每次你点击一个链接页面就会移到顶部。这是sidenav：

<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调用，这样页面就会刷新。

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

示例：

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

Answer 2

如果你想让异步加载使用ajax调用，我建议不要使用get参数。如果完成此操作只会加载您在链接上点击时要加载的内容。

所以它是如何工作的，你有一个主页面，其中所有内容都被加载到

|                                    |
| Header                             |
|------------------------------------|
|                                    |
|                                    |
|    Link1  Link2  link3             |
|   _______________________________  |
|  |                               | |
|  |       this is where           | |
|  |     content is loaded         | |
|  |            in                 | |
|  |                               | |
|  |                               | |
|  |                               | |
|  |_______________________________| |
|                                    |
|                                    |
|                                    |
|                                    |
|                                    |
|                                    |
|____________________________________|

当您点击每个链接时，服务器将发回＆＃34;数据＆＃34;这可以是html或JSON数据，然后您可以将其渲染到要加载的部分。

防止点击移动到顶部

2 个答案: