单击模态中的按钮滚动到引导模式的顶部

时间:2015-07-08 11:25:10

标签: jquery html css twitter-bootstrap

<div class="modal-dialog" role="document">
  <div class="modal-content login conatct_main" id="mdlcont">
    <div class="modal-body">
      <div class="row"> 
        <div class="col-md-12">
          <button id="registrsubmit" name="registrsubmit" value="true" class="friends_log pull-right">Register</button>
        </div>  
      </div>
    </div>
  </div>
</div>

点击后,模态不会滚动到顶部。我尝试了scrolltop()方法。它不起作用。谁可以帮我这个事? ![在此输入图像说明] [1]

4 个答案:

答案 0 :(得分:4)

哇!真是巧合,我今天早上就这么做了。你需要做的是:

// Before calling the modal window...
$("#modalId").scrollTop(0);

同样通过使用BootStrap的模态窗口事件API,您可以这样做:

$('#modalId').on('shown', function() {
    $(this).scrollTop(0);
})

答案 1 :(得分:1)

根据你的形象来判断我猜你是否想要重新定位模态本身以将其移出屏幕,而不是移动视口(这是scrollTop会做的)。查看jQuery's offset function。例如,你可以做

$('#foo').offset({
    top:-$('#foo').outerHeight()
});

或者,如果您想要平滑滚动操作,请使用animate function

$('#foo').animate({
    top:-$('#foo').outerHeight()
});

答案 2 :(得分:1)

这对我有用:

 $("#myModal .modal-dialog").animate({ scrollTop: 0 }, "slow");

答案 3 :(得分:0)

在按钮的click事件上添加相关的jQuery代码......我已经为你添加了这个代码。

<div class="modal-dialog" role="document">
      <div class="modal-content login conatct_main" id="mdlcont">
        <div class="modal-body">
          <div class="row"> 
            <div class="col-md-12">
              <button id="registrsubmit" name="registrsubmit" value="true" class="friends_log pull-right" onclick="$("#modal-content").scrollTop(0);">Register</button>
            </div>  
          </div>
        </div>
      </div>
    </div>