Javascript 我能'；I don’我不明白这页为什么要跳到顶端

HTML:

JS:

//添加项目
$（“#添加待办事项”）。单击（函数（）{
var lastSibling=$（'#todo list>.todo wrap:last of type>input'）.attr（'id'）；
var newId=编号（最后同级）+1；
$（本）。在（''）之前；
$（'#输入todo'+newId+''）.parent（）.parent（）.animate({
高度：“36px”
},200)
$（“#输入todo”+newId+”）.focus（）；
$（'#输入todo'+newId+''）。输入键（函数（）{
$（this.trigger（'enterEvent'）；
})
$（“#输入todo”+newId+”）。在（'blur enterEvent'，function（）上{
var todoTitle=$（'#input todo'+newId+''）.val（）；
var todoTitle length=todoTitle.length；
如果（todoTitleLength>0）{
$（此）。之前（ToDottle）；
$（this.parent（）.parent（）.removeClass（'editing'）；
$（this）.parent（）在（“”）之后；
$（this.remove（）；
$（'.delete item'）。单击（函数（）{
var parentItem=$（this.parent（）；
parentItem.animate({
左：“-30%”，
高度:0,，
不透明度：0
},200);
setTimeout（函数（）{$（parentItem）.remove（）；}，1000）；
});
}
否则{
$（'.editing'）。设置动画({
高度：'0px'
},200);
setTimeout（函数（）{
$（'.editing'）.remove（）
},400)
}
})
});
//删除项目
$（'.delete item'）。单击（函数（）{
var parentItem=$（this.parent（）；
parentItem.animate({
左：“-30%”，
高度:0,，
不透明度：0
},200);
setTimeout（函数（）{$（parentItem）.remove（）；}，1000）；
});
//输入键检测
$.fn.enterKey=函数（fnc）{
返回此。每个（函数（）{
$（此）.按键（功能（ev）{
var-keycode=（ev.keycode？ev.keycode:ev.which）；
如果（键代码=='13'）{
fnc.呼叫（本，ev）；
}
})
})
}

或者，工作代码的示例：

我以为这是因为

。click（）

，所以我试着做

e.preventDefault（）但是没有

我甚至尝试在html链接中创建元素，而不仅仅是标签，并添加
onclick=“return false；”
，但也不添加

老实说，我真是不知所措，因为我以为跳转只发生在点击或链接元素上，所以不知道还能去哪里看

有人能帮我一下吗？
preventDefault（）
是指您要阻止元素的默认操作。如果您单击功能或类似内容的
anchor
标记（此处不是这种情况），则可以使用该选项。出现此问题的原因是，当您单击
标签
时，它试图聚焦页面上方的
输入
。只需设置
display:none：


//添加项目
$（“#添加待办事项”）。单击（函数（）{
var lastSibling=$（'#todo list>.todo wrap:last of type>input'）.attr（'id'）；
var newId=编号（最后同级）+1；
$（本）。在（''）之前；
$（'#输入todo'+newId+''）.parent（）.parent（）.animate({
高度：“36px”
},200)
$（“#输入todo”+newId+”）.focus（）；
$（'#输入todo'+newId+''）。输入键（函数（）{
$（this.trigger（'enterEvent'）；
})
$（“#输入todo”+newId+”）。在（'blur enterEvent'，function（）上{
var todoTitle=$（'#input todo'+newId+''）.val（）；
var todoTitle length=todoTitle.length；
如果（todoTitleLength>0）{
$（此）。之前（ToDottle）；
$（this.parent（）.parent（）.removeClass（'editing'）；
$（this）.parent（）在（“”）之后；
$（this.remove（）；
$（'.delete item'）。单击（函数（）{
var parentItem=$（this.parent（）；
parentItem.animate({
左：“-30%”，
高度:0,，
不透明度：0
},200);
setTimeout（函数（）{$（parentItem）.remove（）；}，1000）；
});
}
否则{
$（'.editing'）。设置动画({
高度：'0px'
},200);
setTimeout（函数（）{
$（'.editing'）.remove（）
},400)
}
})
});
//删除项目
$（'.delete item'）。单击（函数（）{
var parentItem=$（this.parent（）；
parentItem.animate({
左：“-30%”，
高度:0,，
不透明度：0
},200);
setTimeout（函数（）{$（parentItem）.remove（）；}，1000）；
});
//输入键检测
$.fn.enterKey=函数（fnc）{
返回此。每个（函数（）{
$（此）.按键（功能（ev）{
var-keycode=（ev.keycode？ev.keycode:ev.which）；
如果（键代码=='13'）{
fnc.呼叫（本，ev）；
}
})
})
}
*{
/*过渡*/
-webkit转换：.25s易入易出；
-moz转换：.25s易入易出；
-o型过渡：.25秒缓进缓出；
转换：.25秒轻松输入输出；
字体系列：helvetica neue、helvetica、arial、无衬线字体；
字号：18px；
线高：18px；
框大小：边框框；
保证金：0；
}
身体{
背景：#f8f8；
}
h1{
文本对齐：居中；
填充：50px0；
字体大小：30px；
保证金：0；
字号：200；
颜色：#4545；
}
h1.fa检查{
字体大小：30px；
右边距：10px；
颜色：#0eb0b7；
}
#待办事项清单{
宽度：500px；
保证金：0自动50px自动；
填充：50px；
背景：白色；
位置：相对位置；
/*盒影*/
-webkit盒阴影：0 1px4pRGBA（0,0,0,0.3）；
-moz盒阴影：0 1px4pRGBA（0,0,0,0.3）；
盒影：0 1px4pRGBA（0,0,0,0.3）；
/*边界半径*/
-webkit边界半径：5px；
-moz边界半径：5px；
边界半径：5px；
}
#待办事项列表：之前{
内容：“；
位置：绝对位置；
z指数：-1；
/*盒影*/
-webkit盒阴影：0.20px rgba（0,0,0,0.4）；
-moz盒阴影：0.20px rgba（0,0,0,0.4）；
盒影：0.20px rgba（0,0,0,0.4）；
最高：50%；
底部：0；
左：10px；
右：10px；
/*边界半径*/
-webkit边界半径：100px/10px；
-moz边界半径：100px/10px；
边界半径：100px/10px；
}
.待办事项{
显示：块；
位置：相对位置；
左侧填充：35px；
/*盒影*/
-网络工具包盒阴影：0 2px 0-1px#ebebebeb；
-莫兹盒阴影：0 2px 0-1px#ebebebeb；
盒影：0 2px 0-1px#ebebebeb；
}
.todo wrap:类型的最后一个{
/*盒影*/
-网络工具包盒沙多
<h1><i class="fa fa-check"></i>CSS & jQuery To Do Checklist</h1>
<form id="todo-list">
  <span class="todo-wrap">
    <input type="checkbox" id="1" checked/>
    <label for="1" class="todo">
      <i class="fa fa-check"></i>
      Have a good idea
    </label>
    <span class="delete-item" title="remove">
      <i class="fa fa-times-circle"></i>
    </span>
  </span>
  <span class="todo-wrap">
    <input type="checkbox" id="2"/>
    <label for="2" class="todo">
      <i class="fa fa-check"></i>
      Plan idea execution
    </label>
    <span class="delete-item" title="remove">
      <i class="fa fa-times-circle"></i>
    </span>
  </span>
  <span class="todo-wrap">
    <input type="checkbox" id="3"/>
    <label for="3" class="todo">
      <i class="fa fa-check"></i>
      Execute idea
    </label>
    <span class="delete-item" title="remove">
      <i class="fa fa-times-circle"></i>
    </span>
  </span>
    <span class="todo-wrap">
    <input type="checkbox" id="4"/>
    <label for="4" class="todo">
      <i class="fa fa-check"></i>
      Celebrate with a cold one
    </label>
    <span class="delete-item" title="remove">
      <i class="fa fa-times-circle"></i>
    </span>
  </span>
  <div id="add-todo">
    <i class="fa fa-plus"></i>
    Add an Item
  </div>
</form>

*{
/*transition*/
-webkit-transition:.25s ease-in-out;
   -moz-transition:.25s ease-in-out;
     -o-transition:.25s ease-in-out;
        transition:.25s ease-in-out;
font-family:helvetica neue,helvetica,arial,sans-serif;
font-size:18px;
line-height:18px;
box-sizing:border-box;
margin:0;
}
body{
background:#f8f8f8;
}
h1{
text-align:center;
padding:50px 0;
font-size:30px;
margin:0;
font-weight:200;
color:#454545;
}
h1 .fa-check{
font-size:30px;
margin-right:10px;
color:#0eb0b7;
}
#todo-list{
width:500px;
margin:0 auto 50px auto;
padding:50px;
background:white;
position:relative;
/*box-shadow*/
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);
   -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);
        box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);
/*border-radius*/
-webkit-border-radius:5px;
   -moz-border-radius:5px;
        border-radius:5px;
}
#todo-list:before{
content:"";
position:absolute;
z-index:-1;
/*box-shadow*/
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.4);
   -moz-box-shadow:0 0 20px rgba(0,0,0,0.4);
        box-shadow:0 0 20px rgba(0,0,0,0.4);
top:50%;
bottom:0;
left:10px;
right:10px;
/*border-radius*/
-webkit-border-radius:100px / 10px;
   -moz-border-radius:100px / 10px;
        border-radius:100px / 10px;
}
.todo-wrap{
display:block;
position:relative;
padding-left:35px;
/*box-shadow*/
-webkit-box-shadow:0 2px 0 -1px #ebebeb;
   -moz-box-shadow:0 2px 0 -1px #ebebeb;
        box-shadow:0 2px 0 -1px #ebebeb;
}
.todo-wrap:last-of-type{
/*box-shadow*/
-webkit-box-shadow:none;
   -moz-box-shadow:none;
        box-shadow:none;
}
input[type="checkbox"]{
position:absolute;
height:0;
width:0;
opacity:0;
top:-600px;
}
.todo{
display:inline-block;
font-weight:200;
padding:10px 5px;
height:37px;
position:relative;
}
.todo:before{
content:'';
display:block;
position:absolute;
top:calc(50% + 2px);
left:0;
width:0%;
height:1px;
background:#cd4400;
/*transition*/
-webkit-transition:.25s ease-in-out;
   -moz-transition:.25s ease-in-out;
     -o-transition:.25s ease-in-out;
        transition:.25s ease-in-out;
}
.todo:after{
content:'';
display:block;
position:absolute;
z-index:0;
height:18px;
width:18px;
top:9px;
left:-25px;
/*box-shadow*/
-webkit-box-shadow:inset 0 0 0 2px #d8d8d8;
   -moz-box-shadow:inset 0 0 0 2px #d8d8d8;
        box-shadow:inset 0 0 0 2px #d8d8d8;
/*transition*/
-webkit-transition:.25s ease-in-out;
   -moz-transition:.25s ease-in-out;
     -o-transition:.25s ease-in-out;
        transition:.25s ease-in-out;
/*border-radius*/
-webkit-border-radius:4px;
   -moz-border-radius:4px;
        border-radius:4px;
}
.todo:hover:after{
/*box-shadow*/
-webkit-box-shadow:inset 0 0 0 2px #949494;
   -moz-box-shadow:inset 0 0 0 2px #949494;
        box-shadow:inset 0 0 0 2px #949494;
}
.todo .fa-check{
position:absolute;
z-index:1;
left:-31px;
top:0;
font-size:1px;
line-height:36px;
width:36px;
height:36px;
text-align:center;
color:transparent;
text-shadow:1px 1px 0 white, -1px -1px 0 white;
}
:checked + .todo{
color:#717171;
}
:checked + .todo:before{
width:100%;
}
:checked + .todo:after{
/*box-shadow*/
-webkit-box-shadow:inset 0 0 0 2px #0eb0b7;
   -moz-box-shadow:inset 0 0 0 2px #0eb0b7;
        box-shadow:inset 0 0 0 2px #0eb0b7;
}
:checked + .todo .fa-check{
font-size:20px;
line-height:35px;
color:#0eb0b7;
}
/* Delete Items */

.delete-item{
display:block;
position:absolute;
height:36px;
width:36px;
line-height:36px;
right:0;
top:0;
text-align:center;
color:#d8d8d8;
opacity:0;
}
.todo-wrap:hover .delete-item{
opacity:1;
}
.delete-item:hover{
color:#cd4400;
}
/* Add Items */

#add-todo{
padding:25px 0 0 0;
font-size:14px;
font-weight:200;
color:#d8d8d8;
display:inline-block;
cursor:pointer;
}
#add-todo:hover{
color:#6bc569;
/*transition*/
-webkit-transition:none;
   -moz-transition:none;
     -o-transition:none;
        transition:none;
}
#add-todo .fa-plus{
font-size:14px;
/*transition*/
-webkit-transition:none;
   -moz-transition:none;
     -o-transition:none;
        transition:none;
}
.input-todo{
border:none;
outline:none;
font-weight:200;
position:relative;
top:-1px;
margin:0;
padding:0;
width:100%;
}
.editing{
  height:0;
  overflow:hidden;
}

.editing.todo-wrap {
  box-shadow:0 0 400px rgba(0,0,0,.8),inset 0 0px 0 2px #ebebeb;
}

// add items
$('#add-todo').click(function(){
  var lastSibling = $('#todo-list > .todo-wrap:last-of-type > input').attr('id');
  var newId = Number(lastSibling) + 1;

  $(this).before('<span class="editing todo-wrap"><input type="checkbox" id="'+newId+'"/><label for="'+newId+'" class="todo"><i class="fa fa-check"></i><input type="text" class="input-todo" id="input-todo'+newId+'"/></label></div>');
  $('#input-todo'+newId+'').parent().parent().animate({
    height:"36px"
  },200)
  $('#input-todo'+newId+'').focus();

    $('#input-todo'+newId+'').enterKey(function(){
    $(this).trigger('enterEvent');
  })

  $('#input-todo'+newId+'').on('blur enterEvent',function(){
    var todoTitle = $('#input-todo'+newId+'').val();
    var todoTitleLength = todoTitle.length;
    if (todoTitleLength > 0) {
      $(this).before(todoTitle);
      $(this).parent().parent().removeClass('editing');
      $(this).parent().after('<span class="delete-item" title="remove"><i class="fa fa-times-circle"></i></span>');
      $(this).remove();
      $('.delete-item').click(function(){
        var parentItem = $(this).parent();
        parentItem.animate({
          left:"-30%",
          height:0,
          opacity:0
        },200);
        setTimeout(function(){ $(parentItem).remove(); }, 1000);
      });
    }
    else {
      $('.editing').animate({
        height:'0px'
      },200);
      setTimeout(function(){
        $('.editing').remove()
      },400)
    }
  })

});

// remove items 

$('.delete-item').click(function(){
  var parentItem = $(this).parent();
  parentItem.animate({
    left:"-30%",
    height:0,
    opacity:0
  },200);
  setTimeout(function(){ $(parentItem).remove(); }, 1000);
});

// Enter Key detect

$.fn.enterKey = function (fnc) {
    return this.each(function () {
        $(this).keypress(function (ev) {
            var keycode = (ev.keyCode ? ev.keyCode : ev.which);
            if (keycode == '13') {
                fnc.call(this, ev);
            }
        })
    })
}