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

因此，在我创建的自定义模块中，有一个提交按钮（在php中定义的表单），但它已经获取了一个操作，它调用回调函数来触发显示某些信息关于它下面的某个条形码。点击我的提交按钮时自动滚动

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

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

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

来源

2016-06-28 Y. Ben

用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：用PHP添加一些JavaScript代码填写 “after_div” 之后：

$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);

来源

2016-06-28 16:43:38

是的，我做到了，但它没有工作......我把它放在我的ajax命令替换，但它不起作用。我不知道在哪里插入它，以便它滚动到“找不到物品” - 顺便说一句，也有一个id为after_div –

@ Y.Ben，请在我的答案中查看编辑＃2。 –

哦，我看到你做了什么，因为我们必须添加这个新的JS代码，所以你必须创建一个新的变量，并将其作为参数传入！咄。谢谢Jose！ –

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

回答

相关问题