J2EE 项目开发

校园即时通讯系统

技能点

  • 前后端分离技术能力
  • 前端框架技术
  • 前端插件
  • SSM框架
  • 数据安全技术
  • 数据分析

使用bootstrap搭建前端页面

触底监听
<script type="text/javascript">
$(function(){
window.addEventListener("scroll",function(e){
//当前滚动条的位置 >= (文档高度-窗口高度)
if($(document).scrollTop() >= ($(document).height() - $(window).height())){
console.log("触底了");
}
})
})
</script>
返回顶部悬浮按钮

enter description here

html

<div class="goTop"><span class="glyphicon glyphicon-chevron-up" id="up" aria-hidden="true"></span></div>
.goTop{
position: fixed;
bottom: 10%;
right: 3%;
cursor: pointer;
width: 2.5rem;
height: 2.5rem;
display: none;
}
<script>
$(document).scroll(function() {
var scroH = $(document).scrollTop(); //滚动高度
if (scroH >= 100) { // 显示
$('.goTop').css("display", "block")
} else { // 消失
$('.goTop').removeAttr("style")
}
// 点击事件
$('.goTop').click(function() {
if (scroH != 0) {
$('body,html').stop().animate({}).animate({
scrollTop: '0px',
}, 600);
return false;
}
})
});
</script>