スクロール

Question

：

あなたは をクリックしたときには、ここでのコードであるあなたは、タイトルをクリックしたときに動作しますが、ない：https://codepen.io/anon/pen/YQyNyw

誰でもアイデアは？私はとのトラブルを抱えている

特定の部分：ここで

let activeIndex = 0; let scrollTopPadding = -100; let wrapper; let fields; 


$(document).ready(() => { wrapper = $('.wrapper'); fields = $('.field'); fields.click(function() { 
    scrollToActiveField(this); }); 
    let inputs = $('.field button'); 
    inputs.click(function(){ 
    scrollToActiveField($(this).parent()); }); inputs.click(function(event) { // enter 
     let nextInputIndex = inputs.index(this) + 1; 
     if (nextInputIndex < inputs.length) { 
      inputs.eq(nextInputIndex).focus(); 
     } 
     }); 
    setActiveTab(); }); 

は、実施例https://codepen.io/benelliott/pen/beBPyJである - 私の代わりに、入力のボタンを必要としています。

Answer 1

フォームのボタンが不明なタイプのため、問題が発生します。私はフォームが面白い振る舞いをする "submit"ボタンをデフォルトにしていると信じています（このことを説明する追加の答え/コメントが大好きで、今は研究する時間がありません）。

簡単に修正できます。ただ、各ボタンにタイプ=「ボタン」を追加し、あなたのcodepenは動作します：https://codepen.io/hyrumwhite/pen/WOQRzK

<div class="wrapper"> 
<form class="form" action=""> 
    <div class="field"> 
    <label>First name</label> 
    <button type="button"> test</button> 
    </div> 
    <div class="field"> 
    <label>Last name</label> 
    <button type="button"> test</button> 
    </div> 
    <div class="field"> 
    <label>Telephone</label> 
    <button type="button"> test</button> 
    </div> 
    <div class="field"> 
    <label>Email</label> 
    <button type="button"> test</button> 
    </div> 
</form> 
</div>