JQuery滾動到引導模式頂部

我目前使用引導模態插件來顯示我正在設計的網站上的長法律信息，但問題是，如果您打開一個模式後另一個，第二個會已經滾動到第一個位置的任何位置。所以我正在尋找一種使用JS/JQuery將div滾動到頂部的方法。這是我目前使用的代碼：JQuery滾動到引導模式頂部

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); 
    }); 
}

正如你所看到的，我已經試過滾動到頂部的模式已經經過所示。有任何想法嗎？

來源

2013-06-18 Adi Bradfield

好的，我已經回答了我自己的問題。對於任何有此問題的人，只需將此函數添加到您的JS！

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

我將離開這個問題了，因爲沒有一個類似的（我能找到），並且它可以幫助別人

來源

2013-06-18 23:33:13

作品 - 謝謝你！ –

與自舉模式一起工作良好。 –

在'hide'而不是'shown'上做它可能會使平滑演示 –

自舉3事件

現在有改變可以這樣實現（加上平滑的動畫頂端）

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

來源

2013-08-28 20:36:43

看起來像我必須升級到新的bootstrap，如果你可以做那樣的事情！ –

在這種情況下，最好不要使用動畫，以便模式在打開後立即滾動到頂部，因爲從用戶的角度來看，這是一種與最後一個模式無關的全新模式。 – pimlottc

另外注意（假設批准的答案是正確的），事件名稱和被滾動的對象都發生了變化（模態div本身與模態的內容div）。 – pimlottc

向上滾動按鈕有一類：。第渦卷

enter image description here

模態與一類：.modal

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-18 16:48:30 user1040259

這工作。謝謝！ – reformed

有在自舉的變化，你需要使用方法：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'); 
}

來源

2016-08-12 17:42:46