seg_yinzy
/
iotadmin
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

style: scroll auto and scroll to top

dev
chuguofei 2023-06-20 21:39:57 +08:00
parent bfd41b30fd
commit 4295b7e9f6
3 changed files with 47 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/main/webapp/WEB-INF/oss/iot/monitor.jsp
View File

@ -102,6 +102,30 @@
cursor: pointer;
}
</style>
<style>
#scrollTop {
position: fixed;
right: 20px;
bottom: 20px;
text-align: center;
width: 50px;
height: 50px;
line-height: 50px;
color: rgb(255, 255, 255);
border-radius: 50%;
display: block;
cursor: pointer;
background: rgba(0, 0, 0, 0.8);
z-index: 3000;
user-select: none;
}
#layoutMain{
overflow: auto;
height: calc(100vh - 52px);
}
</style>
</head>
<body>
<div>
@ -131,6 +155,8 @@
</c:forEach>
</ul>
</div>
<div class="mapContainer">
<div class="app-container">
<div style="padding: 6px 8px 6px 10px;background: #fff;border-left: 1px solid #f2f2f2;">
@ -142,7 +168,7 @@
class="layui-btn layui-btn-normal">检索
</button>
</div>
<div class="container-layout sceneList-info">
<div id="layoutMain" class="container-layout sceneList-info">
</div>
</div>
@ -296,6 +322,10 @@
</div>
</div>
</div>
<div id="scrollTop">
<img class="arrow-top" src="<%=sensorImg%>/scroll-top.png" style="width: 30px;height: 30px;vertical-align: middle;margin-top: -4px;"/>
</div>
</div>
</body>
<script type="text/javascript">
@ -664,4 +694,19 @@
})
</script>
<script>
$('#layoutMain').on('scroll', function () {
if ($(this).scrollTop() >= 500) {
$('#scrollTop').fadeIn('slow');
} else {
$('#scrollTop').fadeOut('slow');
}
});
$('#scrollTop').on('click', function () {
$('#layoutMain').animate({scrollTop: '0'}, 500);
});
$(function (){
$('body').attr('overflow','hidden');
})
</script>
</html>

BIN
src/main/webapp/image/oss/iot/scroll-top.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

3
src/main/webapp/page/devicedetail/index.html
View File

@ -240,7 +240,7 @@
<div id="scrollTop">
<Icon type="ios-arrow-up" style="font-size: 25px;"/>
<img class="arrow-top" src="/image/oss/iot/scroll-top.png" style="width: 30px;height: 30px;vertical-align: middle;margin-top: -4px;" />
</div>
</div>
<script>
@ -919,7 +919,6 @@
})
</script>
<script>
/* js代码 */
$(window).on('scroll', function () {
if ($(this).scrollTop() >= 500) {
$('#scrollTop').fadeIn('slow');