jQuery实现回顶部

导入CSS样式、js

在头部创建<style type="text/css"></style>标签,内容如下

<style type="text/css">
	
		
	.cd-top {
	    display: inline-block;
	    height: 40px;
	    width: 40px;
	    position: fixed;
	    bottom: 40px;
	    right: 10px;
	    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
	    overflow: hidden;
	    text-indent: 100%;
	    white-space: nowrap;
	    background: rgba(232, 98, 86, 0.8)
	        url(http://www.100sucai.com/img/demo/1335.svg) no-repeat center 50%;
	    visibility: hidden;
	    opacity: 0;
	    -webkit-transition: opacity .3s 0s, visibility 0s .3s;
	    -moz-transition: opacity .3s 0s, visibility 0s .3s;
	    transition: opacity .3s 0s, visibility 0s .3s;
	}

	.cd-top.cd-is-visible,.cd-top.cd-fade-out,.no-touch .cd-top:hover {
	    -webkit-transition: opacity .3s 0s, visibility 0s 0s;
	    -moz-transition: opacity .3s 0s, visibility 0s 0s;
	    transition: opacity .3s 0s, visibility 0s 0s;
	}

	.cd-top.cd-is-visible {
	    visibility: visible;
	    opacity: 1;
	}

	.cd-top.cd-fade-out {
	    opacity: .5;
	}

	.no-touch .cd-top:hover {
	    background-color:red;
	    opacity: 1;
	}

</style>

现在可以在jsp文件里面写东西了,在body标签里写下面写个div:

<div class="cd-top">Top</div>

导入js后,创建<script type="text/javascript"></script>:

<script type="text/javascript">
	
		function editcomm(id) {
			$.ajax({
				type:"get",
				url:"<%=basePath%>unity/detail.action",
				data:{"id":id},
				success:function(data) {
					$("#edit_xq_id").val(data.xq_id);
					$("#edit_xq_mc").val(data.xq_mc);
					$("#edit_xq_dz").val(data.xq_dz)
					$("#edit_xq_long").val(data.xq_long);
					$("#edit_xq_lat").val(data.xq_lat);
					$("#edit_hospital_s").val(data.hospital_s);
					$("#edit_subway_s").val(data.subway_s);
					$("#edit_school_s").val(data.school_s);
					$("#edit_mart_s").val(data.mart_s);
					$("#edit_total_s").val(data.total_s)
				}
			});
		}
</script>

运行一下,就会看到页面的右下角有一个回顶部的按钮。

猜你喜欢

转载自blog.csdn.net/qq_41879385/article/details/82929886
今日推荐