防止点击移动到顶部答案

【问题标题】：Preventing on click to move to top防止点击移动到顶部
【发布时间】：2018-09-15 02:03:47
【问题描述】：

一直在寻找解决我的问题的方法，即在单击链接时阻止我的页面滚动到顶部。我的网站上有这个侧边栏，每次点击链接时，页面都会移到顶部。这是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。为什么它会滚动到顶部，我应该怎么做才能防止这种情况发生？我已经看到了一些带有 #! 的解决方案！和类似的，但它也会阻止加载链接，我不希望这种情况发生。

【问题讨论】：

是滚动还是刷新页面？
在您的链接上使用哈希？例如?p=c#id-of-element-to-jump-to 或使用ajax
以$p为例。我认为用作 id 可能是无效的。如果没有找到点击的 id，它将跳转到顶部。
不确定您的意思，但是当使用a 链接加载页面时，浏览器会重新加载自身，导致它从顶部开始。现在，在新页面加载完毕后，您不希望它再次向下滚动到那个 sidenav 吗？
@Bernhard 该链接并非无效 - 它加载完美。我希望它留在原处而不是向上滚动。

标签： javascript php jquery scroll href

【解决方案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>

【讨论】：

太好了，解决了这个问题。它保持在原地。但是在页面加载之前，顶部仍然会闪烁半秒左右。
你无法改变这一点，至少你放弃了@Pete 的建议：使用 ajax。使用 Ajax，您可以检索页面 chanded 的部分并在实际页面中替换它，而无需刷新任何内容并避免滚动问题

【解决方案2】：

如果您希望异步加载使用 ajax 调用，我建议您不要使用 get 参数。如果操作正确，则只会在单击链接时加载您希望加载的内容。

所以它的工作原理是你有你的主页，所有的东西都加载到里面

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

当您单击每个链接时，服务器将发回“数据”，这可以是 html 或 JSON 数据，然后您可以将其呈现到您要加载的部分。

【讨论】：