點擊我的提交按鈕時自動滾動

因此，在我創建的自定義模塊中，有一個提交按鈕（在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！ –

點擊我的提交按鈕時自動滾動

回答

相關問題