所以在我创建的自定义模块上，有一个提交按钮(在php中定义的表单)，但它已经获得了一个操作，它调用一个回调函数来触发一些信息的显示关于它下面的某个条形码。
我所要做的就是添加一些代码，使我的提交按钮也可以触发自动向下滚动，而不需要链接/锚(因为我希望提交按钮获得该操作，而不是另一个链接)，以便用户不必向下滚动以查看信息。
我避免链接/锚选项的原因是因为我只是不想有一个单独的实体，需要点击才能向下滚动。我想滚动发生的权利，当我点击我的提交按钮。除非链接可以和按钮结合在一起?谢谢!
我的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;
我的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
使用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>
你只是插入你的信息在<div>(或表，或任何你想要的)，给它一个"id"，你将能够向下滚动到它与javascript方法"。scrollintoview()"。
复制/粘贴之前的代码到一个文件中，并将其保存为HTML，然后在浏览器中打开它。
编辑#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>";
编辑#2:替换这一行:
$commands[] = ajax_command_replace($selector, "<div id = 'after_div'>Item not found.</div>");
下一个:
$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);