在显示/隐藏项目时保持站点位置答案

【问题标题】：Holding site position while showing / hiding items在显示/隐藏项目时保持站点位置
【发布时间】：2015-08-13 21:24:26
【问题描述】：

当我显示或隐藏项目时，将页面移动到顶部有问题。我想同时显示和隐藏容器，强制网站在触发显示/隐藏操作时不要将其滚动到顶部。

<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->

p{
  padding: 400px 0px;
}

<!DOCTYPE html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <title>test</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<html>
<body>
    <p>Lorem ipsum</p>
    <a href="#" onclick="toggle_visibility('movie1');">Movie 1</a>
    <div id="movie1" hidden>
        <video id="ad" width="1920" height="1080" controls>
            <source src="video/movie1.avi" type="video/avi">
            too old browser.
        </video>
    </div>
  
    <br/>
  
    <a href="#" onclick="toggle_visibility('movie2');">Movie 2</a>
    <div id="movie2" hidden>
        <video id="ad" width="1920" height="1080" controls>
            <source src="video/movie2.avi" type="video/avi">
            too old browser.
        </video>
    </div>
</body>
</html>

如何防止这种移动？是否有其他解决方案或者我需要更改切换脚本？

【问题讨论】：

您能否提供更多相关信息或制作 jsfiddle
您可以从 sn-p 运行代码，但我们开始吧：jsfiddle.net/3wrq3sce

标签： javascript jquery html

【解决方案1】：

试试这个：- http://jsfiddle.net/adiioo7/ftqo2z68/

从锚标签中删除href=#。

JS：-

function toggle_visibility(id) {
    $("#"+id).toggle();
}

HTML：-

<p>Lorem ipsum</p> <a onclick="toggle_visibility('movie1');">Movie 1</a>

<div id="movie1" hidden>
    <video id="ad" width="1920" height="1080" controls>
        <source src="video/movie1.avi" type="video/avi">too old browser.</video>
</div>
<br/> <a onclick="toggle_visibility('movie2');">Movie 2</a>

<div id="movie2" hidden>
    <video id="ad" width="1920" height="1080" controls>
        <source src="video/movie2.avi" type="video/avi">too old browser.</video>
</div>

【讨论】：

在这种情况下可能并不重要，但不删除 href attr 是否也会删除链接附带的许多默认样式？没有 href 的命名锚看起来像文本，没有颜色、下划线、悬停/活动效果等。如果这很重要，我建议使用 href="javascript:void(0)"。
@wwwmarty 是的，我们可以使用javascript:void(0);