J2EE学习

J2EE 项目开发

校园即时通讯系统

技能点

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

使用bootstrap搭建前端页面

触底监听

<script type="text/javascript">
			$(function(){
				window.addEventListener("scroll",function(e){
					//当前滚动条的位置    >= （文档高度-窗口高度）
					if($(document).scrollTop() >= ($(document).height() - $(window).height())){
						console.log("触底了");
					}
				})
			})
</script>

返回顶部悬浮按钮

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>