html - 没有它去 #id 所在的位置

Question

http://jsfiddle.net/U6aKT/

<a href="#id">go to id</a>
<div style="margin-top:2000px;"></div>
<a id="id">id</a>

根据上面的例子，<div id="id"></div>是否可能弹出页面而不滚动到哪里 <div id="id"></div>是吗？

Answer 1

根据您在不同答案下的问题和评论，您想向下滚动到#id div 或在单击链接时弹出#id div。如果要滚动，则必须使用带有 scrollTop 函数的 jquery animate 函数；使用第一种方式。如果你想弹出然后使用第二种方式。

第一种方式:

这是 JsFiddel 带有滚动动画

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<a href="#id">go to id</a>
<div style="margin-top:2000px;">TEST</div>
<a id="id">id</a>
<script type="text/javascript">$(document) .ready(function() {
  $('[href="#id"]').click(function() {
  $("html,body") .animate({scrollTop: $("#id").offset().top},1200, "easeOutBounce");
  return false;
  });
});</script>  

第二种方式:

这里是 JsFiddle
您必须使用引导模式。您只需要将 anchor 标记的 data-target 属性值初始化为 data-target="#id"。并且必须加载 bootstrap css 以及 jquery 和 bootstrap js。之后让你的 div class="modal fade"id="id"。并添加模态内容、页眉、页脚。享受!

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" > 

    <a href="#id"  data-toggle="modal" data-target="#id">go to id</a> 

   <div class="modal fade" id="id" tabindex="-1" role="dialog" aria-labelledby="id" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
          Header
          </div>
          <div class="modal-body"> 
             Body
            <div class="modal-footer">
             Footer
            </div>
          </div> 
        </div>
      </div>
    </div>
    <script src = "https://code.jquery.com/jquery.js"></script>
    <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" > </script>