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

您最好的选择可能是使用javascript。

假设jQuery已经初始化：

$('[href="#id"]').click(function(e){ // bind clicking said link
    e.preventDefault(); // alternatively: e.stopPropagation();
});

您还可以每次取消绑定并绑定您的点击，如下所示：

$('[href="#id"]').unbind('click').bind('click', function(e){ // bind clicking said link
    e.preventDefault(); // alternatively: e.stopPropagation();
    // EDIT:
    // I **strongly** recommend you use a class such as `fakeLink` 
    // or something since targeting every `href` is a pain in the... 
    // so your selector would then be $('.fakeLink') 
});

但是，默认情况下，它会查找name #id的锚点，如下所示：

<a name="id"></a>

希望这有帮助

Answer 2

根据您在不同答案下的问题和评论，您想要向下滚动到#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
你必须使用bootstrap模态。您只需要将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>

Answer 3

由于href="#id"机制完全是关于滚动，我建议将JavaScript方法附加到页面上的所有<A>元素，并在onClick时与DOM一起玩。

<a href="#id"> without it going to where said #id is

3 个答案:

第一种方式：

第二种方式：