Як перайсці да верхняй частцы мадальнага вокны ў JavaScript

Маё патрабаванне, што мне трэба, каб паказаць мадальнай акно, як форма запаўняецца карыстальнікам. Але вышыня гэтага мадальнага павінна быць не больш за памер акна.

Так што, калі запісы ў форме занадта шмат, то мадальны становіцца пракручваць. Праблема заключаецца ў тым, што пры праверцы запісы ў выглядзе паведамленне пра памылку адлюстроўваецца ў верхняй частцы мадальнага вышэй першага запісу. Калі карыстальнік знаходзіцца ва ўласнасці апошняга, то ён не будзе ведаць, што некаторыя памылкі праверкі мелі месца, калі мадальны ня пракручваецца ўверх на падзеі памылкі.

Я спрабаваў:

$(window).scrollTop();
// and
$('#modalId').scrollTop();

гэта код мадальны:

<div class="modal hide" id="groupModal" tabindex="-1" role="dialog" aria-hidden="true" >
    <div class="modal-header">
    </div>
    <div class="modal-body" style="max-height: 300px;">
        <div class="grpForm">
            <div class="alert alert-error hide">

                
            </div>
            <div class="alert alert-success hide">

                
            </div>
            <form class = "formFieldHolder" id="groupInfoForm"></form>
          </div>
    </div>
    <div class="modal-footer">
        <button class="btn cancelFormBtn" data-dismiss="modal" aria-hidden="true" msgkey="common.cancel.label"></button>
        <button class="btn btn-primary submitGroupFormBtn" type="submit" msgkey="common.submit.label"></button>     
    </div>
</div>
19
размясціць свой мадальны код вокны
дададзена аўтар Chamika Sandamal, крыніца
Вы можаце пакінуць код, устаўце код і абярыце, а затым націсніце значок {}
дададзена аўтар Chamika Sandamal, крыніца
я не ведаю, як я проста капіяваць ўставіць HTML, але гэта не адлюстроўваецца на ўтрыманне пытання, таму я проста вярнуўся код. Дазвольце мне бачыць, FAQ і размесцім код, калі я ведаю, як. Можа заняць час b'coz павінны працаваць над чым-то прама цяпер.
дададзена аўтар kavinder, крыніца
Дзякуй @Chamika гэта першы раз, калі я задаю пытанне, які неабходны код, паколькі я стварыў профіль
дададзена аўтар kavinder, крыніца

6 адказы

. <�Код> $ ( '# modalId') scrollTop (0);

scrollTop() only returns the value; scrollTop(0) sets the value to 0 (all the way to the top)

22
дададзена
Вялікі дзякуй на тлумачэнні розніцы паміж двума вышэй. Аднак я дасягнуў таго, што я хацеў, я першапачаткова выкарыстаў у $ ( «# modalId») scrollTop (0). але замест гэтага я павінен быў зрабіць $ ( «#») bodyId_within_modal_which_is_scrollabe scrollTop (0).
дададзена аўтар kavinder, крыніца

Для пракруткі старонкі ў мадальнасці, абярыце HTML, цела і перайдзіце да верхняга зрушэнню мадальнага

$("html, body").scrollTop($("#modalId").offset().top);

Калі вы хочаце, каб пракруціць мадальны DIV да пачатку выкарыстання

$("#modalId").scrollTop(0);

Прыклад на jsFiddle

Вы можаце камбінаваць як для пракруткі старонкі і мадальнасці ў бачную вобласць для карыстальніка, калі гэта неабходна.

Спасылкі

11
дададзена
Гэта будзе пракручваць старонку ў верхняй частцы мадальнага вокны. але ён хоча, каб праглядзець змест мадальны
дададзена аўтар Chamika Sandamal, крыніца
Так, як сказана вышэй, гэта ўзяў мяне да вяршыні мадальнага вокны. Прамое выкарыстанне scrollTop (0) з'яўляецца найлепшым рашэннем, як далёка, калі ён не мае некаторыя фоны ўскладненні. Дзякуй за адказ, хоць гэта можа быць карысна ў іншым месцы.
дададзена аўтар kavinder, крыніца
let element = document.getElementById('your_div_id');

element.scrollIntoView(true);
2
дададзена
У той час як фрагмент выдатна, не маглі б вы ўдакладніць <�я> як і <�я> чаму гэта вырашае праблему OPS?
дададзена аўтар Paul Kertscher, крыніца
 <script type="text/javascript">
            $(document).ready(function(){ 
            $('.scroll_top').hide();
            $(window).scroll(function(){
                if ($(this).scrollTop() > 100) {
                    $('.scroll_top').fadeIn();
                } else {
                    $('.scroll_top').fadeOut();
                }
            }); 

            $('.scroll_top').click(function(){
                $("html, body").animate({ scrollTop: 0 }, 500);
                return false;
            });

        });
</script>
1
дададзена

You have to include "jquery-1.7.1.min.js" file in your page. http://code.jquery.com/jquery-1.7.1.min.js

0
дададзена

Для таго, каб пазбегнуць грубага руху да вяршыні, я палічыў за лепшае б выкарыстоўваць (анімаванае рух):

$('#modalId').animate({
        scrollTop : 0
    }, 'slow');
0
дададзена