JQuery的插入操作&滚动条显示返回顶部

简单实现文本框的插入与移除：

HTML代码块：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <script src="jquery-3.3.1.min.js"></script>
 9 <script src="clone.js"></script>
10 
11 <div class="box">
12     <div class="item">
13         <button onclick="add(this)">+</button>
14         <input type="text" >
15     </div>
16 
17 </div>
18 </body>
19 </html>

JavaScript的代码块：

1 function add(self) {
2     var $clo_obj=$(self).parent().clone();
3     $clo_obj.children("button").html("-").attr("onclick","del_obj(this)");
4     $(".box").append($clo_obj);
5 }
6 function del_obj(self) {
7     $(self).parent().remove()
8 }

滚动条显示返回顶部的实现：

HTML代码块：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <link rel="stylesheet" href="clone.css" type="text/css">
 7 </head>
 8 <body>
 9 <script src="jquery-3.3.1.min.js"></script>
10 <script src="clone.js"></script>
11 
12 <div class="box">
13     <div class="item"></div>
14     <div class="end"></div>
15     <div class="ret hide" onclick="go_top()">返回顶部</div>
16 </div>
17 </body>
18 </html>

css代码块：

 1 *{
 2     margin: 0px;
 3     padding: 0px;
 4 }
 5 .item{
 6      100%;
 7     height: 1024px;
 8     background-color: pink;
 9 }
10 .end{
11      100%;
12     height: 1024px;
13     background-color: burlywood;
14 }
15 .ret{
16     position: fixed;
17     right: 20px;
18     bottom: 20px;
19      70px;
20     height: 50px;
21     background-color: #396bb3;
22     line-height: 50px;
23     color: #f4f4f4;
24     text-align: center;
25 }
26 .hide{
27     display: none;
28 }

javasc代码块：

 1 window.onscroll=function(){
 2     if ($(window).scrollTop()>1000){
 3         $(".ret").removeClass("hide")
 4     }
 5     else {
 6         $(".ret").addClass("hide")
 7     }
 8 };
 9 
10 function go_top() {
11     $(window).scrollTop(0)
12 }