使用Javascript向下滾動對話框（窗口內的對話框）

Question

我是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> 

Answer 1

嘗試jQuery scrollTop()：

設置每個 匹配的元素的滾動條的當前垂直位置。

將其應用於您的對話框元素，而不是窗口。

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