导入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>
运行一下,就会看到页面的右下角有一个回顶部的按钮。