JQuery 滚动到 Bootstrap 模式的顶部答案

【问题标题】：JQuery scroll to top of Bootstrap ModalJQuery 滚动到 Bootstrap 模式的顶部
【发布时间】：2013-06-15 08:39:35
【问题描述】：

我目前正在使用引导模式插件在我正在设计的网站上显示长的法律消息，但问题是如果你一个接一个地打开一个模式，第二个将已经滚动到任何位置第一个是。所以我正在寻找一种使用 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);
    });
}

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

【问题讨论】：

标签： javascript jquery twitter-bootstrap

【解决方案1】：

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

$('#modal').on('shown.bs.modal', function () {
    $('#modal').animate({ scrollTop: 0 }, 'slow');
});

【讨论】：

看来我必须升级到新的引导程序，如果你能做到这一点！
在这种情况下最好不要有动画，这样一打开模态就已经滚动到顶部，因为从用户的角度来看，它是一个全新的模态，与最后一个。
另请注意（假设批准的答案是正确的），事件名称和要滚动的对象都已更改（模态 div 本身与模态的内容 div）。
由于某种原因，这仅在引用模态 ID 时有效，即 #modal 而不是类，即 .modal

【解决方案2】：

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

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

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

【讨论】：

在hide 上而不是shown 上进行可能会使演示更流畅
它是一个类。 .modal-content

【解决方案3】：

在 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，一切正常。

【讨论】：

【解决方案4】：

向上滚动按钮有一个类：.page-scroll

Modal 类：.modal

JS 使用 modal 实现滚动（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();
});

【讨论】：

【解决方案5】：

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

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

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

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

$('.modal-body').animate({scrollTop: 0},400);

【讨论】：

【解决方案6】：

您需要使用的 boostrap 发生了变化：在 shown.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');
}

【讨论】：

【解决方案7】：

ScrollTop bootbox modal on fadeIn答案在本期。

在设置引导框对话框时在末尾添加.off("shown.bs.modal");this。

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

打开对话框时会滚动到顶部。

【讨论】：