使用Javascript向下滚动一个对话框(窗口内的对话框)

时间:2015-11-08 10:29:40

标签: javascript jquery html dialog

我是Javascript的新手。

我有一个打开对话框的网页。我想用语法向下滚动对话框,而不是主窗口。

我尝试过使用:

window.scrollTo(500,0);

但是这会向下滚动主窗口,而不是对话框。

对话框的HTML代码如下所示:

<div id="moodle-dialogue-yui_3_17_2_2_1446976755272_806" role="dialog"
 aria-labelledby="moodle-dialogue-yui_3_17_2_2_1446976755272_806-header-text"
 class="moodle-dialogue-wrap moodle-dialogue-content yui3-widget-stdmod">
<div id="moodle-dialogue-yui_3_17_2_2_1446976755272_806-header-text" class="moodle-dialogue-hd yui3-widget-hd"
     style="cursor: move;">Annotate PDF<span class="yui3-widget-buttons" id="yui_3_17_2_2_1446976755272_876"><button
        class="yui3-button closebutton" title="Close"></button></span></div>
<div class="moodle-dialogue-bd yui3-widget-bd" id="yui_3_17_2_2_1446976755272_4561">
    <div class="pageheader" id="yui_3_17_2_2_1446976755272_4608">
        <div class="navigation" role="navigation">
            <button disabled="true" class="navigate-previous-button" accesskey="j"><img alt="Previous page"
                                                                                        class="smallicon"
                                                                                        title="Previous page"
                                                                                        src="http://moodle2.cs.huji.ac.il/nu15/theme/image.php/formal_white/assignfeedback_editpdf/1446608318/nav_prev">
            </button>
            <select aria-label="Go to page" class="navigate-page-select" accesskey="k"
                    id="yui_3_17_2_2_1446976755272_994">
                <option value="0">Page 1</option>
                <option value="1">Page 2</option>
                <option value="2">Page 3</option>
                <option value="3">Page 4</option>
                <option value="4">Page 5</option>
                <option value="5">Page 6</option>
            </select>
            <button class="navigate-next-button" accesskey="l"><img alt="Next page" class="smallicon"
                                                                    title="Next page"
                                                                    src="http://moodle2.cs.huji.ac.il/nu15/theme/image.php/formal_white/assignfeedback_editpdf/1446608318/nav_next">
            </button>
        </div>
        <div class="navigation-search" role="navigation">
            <button data-tool="searchcomments" class="searchcommentsbutton" accesskey="h"><img
                    alt="searchcomments (Alt/Shift-Alt/Ctrl-Option + h)" class="smallicon"
                    title="searchcomments (Alt/Shift-Alt/Ctrl-Option + h)"
                    src="http://moodle2.cs.huji.ac.il/nu15/theme/image.php/formal_white/assignfeedback_editpdf/1446608318/comment_search">
            </button>
        </div>
        <div class="toolbar" role="toolbar">
            <button data-tool="stamp" class="stampbutton" accesskey="n" aria-pressed="false"><img
                    alt="stamp (Alt/Shift-Alt/Ctrl-Option + n)" class="smallicon"
                    title="stamp (Alt/Shift-Alt/Ctrl-Option + n)"
                    src="http://moodle2.cs.huji.ac.il/nu15/theme/image.php/formal_white/assignfeedback_editpdf/1446608318/stamp">
            </button>
            <button data-tool="currentstamp" class="currentstampbutton" accesskey="m"
                    id="yui_3_17_2_2_1446976755272_914"><img alt="currentstamp (Alt/Shift-Alt/Ctrl-Option + m)"
                                                             class="smallicon"
                                                             title="currentstamp (Alt/Shift-Alt/Ctrl-Option + m)"
                                                             src="http://moodle2.cs.huji.ac.il/nu15/pluginfile.php/345984/assignfeedback_editpdf/stamps/9333/cross.png"
                                                             height="16" width="16"></button>
        </div>
        <div class="toolbar" role="toolbar">
            <button data-tool="pen" class="penbutton" accesskey="y" aria-pressed="false"><img
                    alt="pen (Alt/Shift-Alt/Ctrl-Option + y)" class="smallicon"
                    title="pen (Alt/Shift-Alt/Ctrl-Option + y)"
                    src="http://moodle2.cs.huji.ac.il/nu15/theme/image.php/formal_white/assignfeedback_editpdf/1446608318/pen">
            </button>
            <button data-tool="line" class="linebutton" accesskey="u" aria-pressed="false"><img
                    alt="line (Alt/Shift-Alt/Ctrl-Option + u)" class="smallicon"
                    title="line (Alt/Shift-Alt/Ctrl-Option + u)"
                    src="http://moodle2.cs.huji.ac.il/nu15/theme/image.php/formal_white/assignfeedback_editpdf/1446608318/line">
            </button>
            <button data-tool="rectangle" class="rectanglebutton" accesskey="i" aria-pressed="false"><img
                    alt="rectangle (Alt/Shift-Alt/Ctrl-Option + i)" class="smallicon"
                    title="rectangle (Alt/Shift-Alt/Ctrl-Option + i)"
                    src="http://moodle2.cs.huji.ac.il/nu15/theme/image.php/formal_white/assignfeedback_editpdf/1446608318/rectangle">
            </button>
            <button data-tool="oval" class="ovalbutton" accesskey="o" aria-pressed="false"><img
                    alt="oval (Alt/Shift-Alt/Ctrl-Option + o)" class="smallicon"
                    title="oval (Alt/Shift-Alt/Ctrl-Option + o)"
                    src="http://moodle2.cs.huji.ac.il/nu15/theme/image.php/formal_white/assignfeedback_editpdf/1446608318/oval">
            </button>
            <button data-tool="highlight" class="highlightbutton" accesskey="p" aria-pressed="false"><img
                    alt="highlight (Alt/Shift-Alt/Ctrl-Option + p)" class="smallicon"
                    title="highlight (Alt/Shift-Alt/Ctrl-Option + p)"
                    src="http://moodle2.cs.huji.ac.il/nu15/theme/image.php/formal_white/assignfeedback_editpdf/1446608318/highlight">
            </button>
            <button data-tool="annotationcolour" class="annotationcolourbutton" accesskey="r"
                    id="yui_3_17_2_2_1446976755272_910"><img alt="annotationcolour (Alt/Shift-Alt/Ctrl-Option + r)"
                                                             class="smallicon"
                                                             title="annotationcolour (Alt/Shift-Alt/Ctrl-Option + r)"
                                                             src="http://moodle2.cs.huji.ac.il/nu15/theme/image.php/formal_white/assignfeedback_editpdf/1446608318/colour_red">
            </button>
        </div>
        <div class="toolbar" role="toolbar" id="yui_3_17_2_2_1446976755272_4607">
            <button data-tool="select" class="selectbutton assignfeedback_editpdf_selectedbutton" accesskey="c"
                    aria-pressed="true" id="yui_3_17_2_2_1446976755272_4606"><img
                    alt="select (Alt/Shift-Alt/Ctrl-Option + c)" class="smallicon"
                    title="select (Alt/Shift-Alt/Ctrl-Option + c)"
                    src="http://moodle2.cs.huji.ac.il/nu15/theme/image.php/formal_white/assignfeedback_editpdf/1446608318/select">
            </button>
        </div>
        <div class="toolbar" role="toolbar">
            <button data-tool="comment" class="commentbutton" accesskey="z" aria-pressed="false"><img
                    alt="comment (Alt/Shift-Alt/Ctrl-Option + z)" class="smallicon"
                    title="comment (Alt/Shift-Alt/Ctrl-Option + z)"
                    src="http://moodle2.cs.huji.ac.il/nu15/theme/image.php/formal_white/assignfeedback_editpdf/1446608318/comment">
            </button>
            <button data-tool="commentcolour" class="commentcolourbutton" accesskey="x"
                    id="yui_3_17_2_2_1446976755272_907"><img alt="commentcolour (Alt/Shift-Alt/Ctrl-Option + x)"
                                                             class="smallicon"
                                                             title="commentcolour (Alt/Shift-Alt/Ctrl-Option + x)"
                                                             src="http://moodle2.cs.huji.ac.il/nu15/theme/image.php/formal_white/assignfeedback_editpdf/1446608318/background_colour_yellow"
                                                             style="border-style: solid;"></button>
        </div>
        <div class="clearfix"></div>
    </div>
    <div class="hideoverflow" id="yui_3_17_2_2_1446976755272_4560">
        <div class="drawingregion" style="max-height: 786px;" id="yui_3_17_2_2_1446976755272_4559">
            <div class="drawingcanvas"
                 style="width: 850px; height: 1100px; background-image: url(http://moodle2.cs.huji.ac.il/nu15/pluginfile.php/345984/assignfeedback_editpdf/pages/9333/image_page0.png);"
                 id="yui_3_17_2_2_1446976755272_4572">
                <div class="loading" hidden="hidden" style="display: none;">
                    <div class="progress progress-info progress-striped active" title="Loading PDF editor"
                         role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
                        <div class="bar" style="width: 0%"></div>
                    </div>
                    <div class="progressbarlabel">Generating the PDF...</div>
                </div>
                <div style="position: absolute; left: 0px; top: 0px; visibility: visible;">
                    <svg:svg pointer-events="none" overflow="auto" id="yui_3_17_2_2_1446976755272_890"
                             style="position: absolute; top: 0px; left: 0px; overflow: auto; visibility: visible;"></svg:svg>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="moodle-dialogue-ft yui3-widget-ft"></div>

1 个答案:

答案 0 :(得分:0)

尝试jQuery scrollTop()

  

为每个设置滚动条的当前垂直位置   一组匹配的元素。

将其应用于对话框元素,而不是窗口。

$('#moodle-dialogue-yui_3_17_2_2_1446976755272_806').scrollTop(100);