61

我目前正在使用引导模式插件在我正在设计的网站上显示长的法律消息，但问题是如果你一个接一个地打开一个模式，第二个已经滚动到第一个的任何位置. 所以我正在寻找一种使用 JS/JQuery 将 div 滚动到顶部的方法。这是我目前使用的代码：

HTML：

<!--MODAL-->
<div id="modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="modalTitle" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="modalTitle"></h3>
</div>
<div id="modal-content" class="modal-body">
</div>
<div class="modal-footer">
<button id="modalPrint" class="btn btn-info hidden-phone" onClick=''>Print</button>
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>

Javascript：

function openModal(heading, url) {
    $.ajax({
    url: url,
    cache: false
    }).done(function( html ) {
    $("#modal-content").html(html);
    $("#modalTitle").html(heading);
    $('#modalPrint').attr('onClick', 'loadPrintDocument(printCookies, {attr : "href", url : '+ url +', showMessage: false, message: "Please wait while we create your document"})');
    $('#modal').modal('show');
    $("#modal-content").scrollTop(0);
    });
}

如您所见，我尝试在显示模式后滚动到顶部。有任何想法吗？

4

7 回答 7

74

现在使用 bootstrap 3，事件发生了变化，可以像这样实现（加上顶部的平滑动画）

$('#modal').on('shown.bs.modal', function () {
    $('#modal').animate({ scrollTop: 0 }, 'slow');
});
于 2013-08-28T20:36:43.293 回答
64

好的，我已经回答了我自己的问题。对于其他有此问题的人，只需将此功能添加到您的 JS 中！

$('#modal').on('shown', function () {
    $("#modal-content").scrollTop(0);
});

我会留下这个问题，因为没有一个类似的（我能找到），它可能会帮助某人

于 2013-06-18T23:33:13.223 回答
7

在 Bootstrap 4 (v4.0.0-alpha.6) 上，以下对我来说效果很好：

$('#Modal').show().scrollTop(0);

请注意，从bootstrap-4.0.0-beta.1和Firefox 56.0.1 开始，这似乎无法正常工作；

我检查了 IE11、MS Edge 和 Chrome，效果很好。

于 2017-06-23T08:46:54.133 回答
4

在 Bootstrap 4 中，以下内容对我有用：

$('.modal-body').scrollTop(0);

您需要在 modal-body 上滚动顶部，因为父元素（modal、modal-dialog、modal-content）是容器，不会随用户滚动。

但是，如果您更喜欢不那么生涩的动作，请尝试动画路线：

$('.modal-body').animate({scrollTop: 0},400);
于 2020-04-17T18:39:55.367 回答
3
  1. 向上滚动按钮有一个类：.page-scroll

在此处输入图像描述

  1. 具有以下类别的模态：.modal

  2. JS 使用模态进行滚动（JS 可以简化）：

    $('body').on('click', '.page-scroll', function(event) {
    var $anchor = $(this);
    $('html, body, .modal').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top
    }, 1500, 'easeInOutExpo');
    event.preventDefault();
});
于 2015-02-18T16:48:30.183 回答
2

您需要使用的boostrap发生了变化：在showed.bs.modal上

显示模态窗口时调用一个函数（我选择了这种方法）

<button onclick="showSMSSummary(); return false;" 
data-toggle="tooltip" title="Click To View Summary" 
class="btn btn-primary btn-sm">SMS Summary</button>

function showSMSSummary()
{
   $('#HelpScreenModalContent').modal('show');            
   $('#HelpScreenModal').animate({ scrollTop: 0 }, 'fast');
}
于 2016-08-12T17:42:46.117 回答
0

ScrollTop bootbox modal on fadeIn The answer is in this issue.

When setting up bootbox dialog add .off("shown.bs.modal");this at the end.

bootbox.dialog({ ... }).off("shown.bs.modal");

It will scroll be at top when open dialog.

于 2016-09-16T08:38:07.183 回答