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 οnclick="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" οnclick="go_top()">返回顶部</div>
16 </div>
17 </body>
18 </html>

css代码块：

 1 *{
 2     margin: 0px;
 3     padding: 0px;
 4 }
 5 .item{
 6     width: 100%;
 7     height: 1024px;
 8     background-color: pink;
 9 }
10 .end{
11     width: 100%;
12     height: 1024px;
13     background-color: burlywood;
14 }
15 .ret{
16     position: fixed;
17     right: 20px;
18     bottom: 20px;
19     width: 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.οnscrοll=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 }

转载于:https://www.cnblogs.com/wen-kang/p/9482671.html

JQuery的插入操作滚动条显示返回顶部相关推荐

小程序 WXS响应事件（超出两屏显示返回顶部按钮）
小程序 WXS响应事件(超出两屏显示返回顶部按钮) 两种解决办法: view页面形式实现: <wxs module="test" src="./test.wxs&q ...
mybatis 执行插入操作，insert 返回1，数据库中无数据。数据库中数据的创建时间和插入执行时间不一致。
大家好,我是烤鸭: 今天记录一下线上的问题,由于不是我们组的代码,所以没参与全程,只是最后有幸听各位大佬探讨解决方案.mybatis 执行插入操作,insert返回1,日志记录和接口返回都正常,但是数 ...
【学亮IT手记】jQuery DOM插入操作
DOM插入操作 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...
jq实现页面滑动到一定位置显示返回顶部按钮，点击回到页面顶部
返回顶部按钮固定在页面某个位置,当页面滑动超过600时,显示此按钮,可用jq的scrollTop()方法实现: 点击触发click事件,并返回到页面顶部,这里设置返回顶部的时间是1000ms(即1s) ...
JavaScript之jQuery够用即可（each循环、位置偏移量和大小、克隆外层标签、嵌套返回顶部、集体绑定事件）
文章目录一.each循环二.位置偏移量和大小 1.offset就是标签距离视口的偏移量 2.position相对于已经定位的父标签的偏移量 3.访问尺寸 4.测试代码三.克隆外层标签四.jQu ...
仿新浪微博返回顶部的js实现(jQuery/MooTools)
一.引言在web页面中,如果页面较高,为了方便用户快速地返回顶部,都会添加一个返回顶部按钮.例如: 其中淘宝网的是要滚动条的滚动距离大于某一段距离才显示返回顶部按钮:人人网的返回顶部直接在底部的工具 ...
返回顶部的js实现(jQuery/MooTools)
一.引言在web页面中,如果页面较高,为了方便用户快速地返回顶部,都会添加一个返回顶部按钮.例如: 如果你看到这段文字,说明转自<一棵树-博客园>,原文链接:http://www.cnb ...
自动显示隐藏返回顶部功能
功能描述: 当通过浏览器拖动滚动条后,自动显示"返回顶部"图标,当点击"返回顶部"图标后,自动隐藏图标代码如下: 在页面头文件中引入jquery [htm ...
jQuery实现返回顶部
jQuery实现返回顶部(gotop) 最常见的返回顶部大多是用 js 或者 jQ写出来的,但也有少部分直接用的 HTML 锚点实现的,自我感觉,返回顶部这个特效用锚点带来的用户体验不 ...

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

JQuery的插入操作滚动条显示返回顶部相关推荐

最新文章

热门文章