单击我的提交按钮时自动滚动

So on my custom module that I've created, there's a submit button (form defined in php) but it already acquires an action where it calls a callback function to trigger the display of some information regarding a certain barcode right below it.

所以在我创建的自定义模块上，有一个提交按钮（在php中定义的形式），但它已经获取了一个动作，它调用一个回调函数来触发显示有关它下面某个条形码的一些信息。

All I want to do is add some code that will allow my submit button to also trigger an automatic scroll down without a link/anchor (because I want the SUBMIT BUTTON to acquire that action, not another link) so that the user doesn't have to scroll down to view the information.

我想要做的就是添加一些代码，允许我的提交按钮也触发自动向下滚动而没有链接/锚点（因为我希望SUBMIT BUTTON获取该动作，而不是另一个链接），这样用户就不会必须向下滚动才能查看信息。

The reason I'm avoiding the link/anchor option is because I just dont want to have a separate entity that needs to be clicked in order to scroll down. I want the scroll to happen right when i click my submit button. Unless a link can be combined with a button? Thanks!

我避开链接/锚选项的原因是因为我不想要一个单独的实体需要点击才能向下滚动。我希望滚动在我单击提交按钮时正确发生。除非链接可以与按钮组合？谢谢！

My PHP submit button form:

我的PHP提交按钮表单：

//submit button that uses ajax (to display whats in callback)
$form['submit_button'] = array(
            '#type'=> 'submit',
            '#value'=> t('Submit'),
            '#ajax' => array( //no need to refresh the page bc ajax
                    'callback' => '_ibbr_inv_after_callback', //callback
            ),
            '#suffix' => "<div id='after_div'><br></div>
                      <div id='after_status'></div>",
    );
    return $form;

My PHP callback function:

我的PHP回调函数：

//function for submit button callback
function _ibbr_inv_after_callback($form, $form_state) {
    $selector = '#after_div';
    $commands = array();

    $query = new EntityFieldQuery();
    $entities = $query->entityCondition('entity_type', 'node')
    ->propertyCondition('type', 'eq')
    ->propertyCondition('title', $form_state['input']['barcode'])
    ->propertyCondition('status', 1)
    ->range(0,1)
    ->execute();

    //If this barcode is found in database
    if (!empty($entities['node'])) {
            $node = node_load(array_shift(array_keys($entities['node'])));

            //Load fields from returned equipment item
            $room = taxonomy_term_load($node->field_eq_room['und'][0]['tid']);
            $desc = $node->field_eq_description['und'][0]['value'];
            $manu =  $node->field_eq_mfr['und'][0]['value'];
            $model = $node->field_eq_modelno['und'][0]['value'];
            $serial = $node->field_eq_serial['und'][0]['value'];
            //displaying all the components of the specific barcode
            $info = "<div id='after_div'><b>Title</b>: $node->title<br>
                            <b>Description</b>: $desc<br>
                            <b>Manufacturer</b>: $manu<br>
                            <b>Room</b>: $room->name<br>
                            <b>Model Number:</b> $model<br>
                            <b>Serial Number:</b> $serial<br></div>";
            //Displaying the Confirm and Flag buttons
            $commands[] = ajax_command_replace($selector,  $info);
            $commands[] = ajax_command_replace("#after_status", "<div id='after_status'> <button id = 'confirm' type = 'submit' name = 'Confirm' value = 'Confirm'> Confirm</button><button id = 'Flag' type = 'submit' name = 'flag' value = 'flag'>Flag </button> </div>");
            //$commands[] = ajax_command_invoke("#after_div", 'animate', array("{scrollTop: top}",1000));
    //If this barcode is not found in the database
    }else {
            //Displaying the Add button and "Item not found" ONLY IF this entity is empty (meaning barcode was not found in database)
            $commands[] = ajax_command_replace($selector,  "<div id = 'after_div'>Item not found.</div>");
            $commands[] = ajax_command_replace("#after_status", "<div id='after_status'><button id = 'add' type = 'submit' name = 'Add' value = 'Add'>Add new item</button></div>");

    }
    return array('#type' => 'ajax', '#commands' => $commands);
}//end _ibbr_inv_after_callback

1 个解决方案

#1

With javascript you can make your submit button to jump to any HTML element on the page, without link/anchor. Next example has two buttons, when clicked, buttons will scroll down to different points of the page :

使用javascript，您可以使用提交按钮跳转到页面上的任何HTML元素，而无需链接/锚点。下一个示例有两个按钮，单击时，按钮将向下滚动到页面的不同点：

<html>
  <head>
<script type="text/javascript">
function godown ()
{ document.getElementById("down").scrollIntoView(); // JUMP TO DIV "DOWN".
}
function gobottom ()
{ document.getElementById("bottom").scrollIntoView(); // JUMP TO DIV "BOTTOM".
}
</script>
  </head>
  <body>
    <button onclick="godown()">Click to go down</button>
    <button onclick="gobottom()">Click to go bottom</button>

    <br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>0<br/>
    <br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>0<br/>
    <br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>0<br/>
    <br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>0<br/>
    <br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>0<br/>
    <br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>0<br/>
    <br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>0<br/>
    <br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>0<br/>
    <br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>0<br/>

    <div id="down">You are down!</div>

    <br/>a<br/>b<br/>c<br/>d<br/>e<br/>f<br/>g<br/>h<br/>i<br/>j<br/>
    <br/>a<br/>b<br/>c<br/>d<br/>e<br/>f<br/>g<br/>h<br/>i<br/>j<br/>
    <br/>a<br/>b<br/>c<br/>d<br/>e<br/>f<br/>g<br/>h<br/>i<br/>j<br/>
    <br/>a<br/>b<br/>c<br/>d<br/>e<br/>f<br/>g<br/>h<br/>i<br/>j<br/>
    <br/>a<br/>b<br/>c<br/>d<br/>e<br/>f<br/>g<br/>h<br/>i<br/>j<br/>
    <br/>a<br/>b<br/>c<br/>d<br/>e<br/>f<br/>g<br/>h<br/>i<br/>j<br/>
    <br/>a<br/>b<br/>c<br/>d<br/>e<br/>f<br/>g<br/>h<br/>i<br/>j<br/>
    <br/>a<br/>b<br/>c<br/>d<br/>e<br/>f<br/>g<br/>h<br/>i<br/>j<br/>
    <br/>a<br/>b<br/>c<br/>d<br/>e<br/>f<br/>g<br/>h<br/>i<br/>j<br/>

    <div id="bottom">You are at the bottom!</div>
  </body>
</html>

You just insert your information inside a <div> (or a table, or anything you want), give it an "id", and you will be able to scroll down to it with javascript method ".scrollIntoView()".

您只需在

（或表格或任何您想要的内容）中插入您的信息，给它一个“id”，您就可以使用javascript方法“.scrollIntoView（）”向下滚动它。

Copy/paste previous code in a file and save it as HTML, then open it in your browser.

将以前的代码复制/粘贴到文件中并将其另存为HTML，然后在浏览器中打开它。

Edit #1 : add some javascript code with PHP right after you fill "after_div" :

编辑＃1：在填写“after_div”后立即使用PHP添加一些javascript代码：

 $info = "<div id='after_div'><b>Title</b>: $node->title<br>
                            <b>Description</b>: $desc<br>
                            <b>Manufacturer</b>: $manu<br>
                            <b>Room</b>: $room->name<br>
                            <b>Model Number:</b> $model<br>
                            <b>Serial Number:</b> $serial<br></div>" .
         "<script type='text/javascript'>" .
         "document.getElementById('after_div').scrollIntoView();" . 
         "</script>";

Edit #2 : replace this line :

编辑＃2：替换此行：

$commands[] = ajax_command_replace($selector,  "<div id = 'after_div'>Item not found.</div>");

by this next one :

通过这个下一个：

$body = "<div id = 'after_div'>Item not found.</div>" .
         "<script type='text/javascript'>" .
         "document.getElementById('after_div').scrollIntoView();" . 
         "</script>";
$commands[] = ajax_command_replace($selector,  $body);