返回顶部于页面向下滚动时从页面底部向上滑入效果。这里不包含点击事件,仅仅展示滑入代码。
js代码
// 滚动事件 $(window).scroll(function() { var timmer = null; var scroll_top = $(window).scrollTop(); 0 < scroll_top ? $("#roll-top").css("bottom", "20px") : $("#roll-top").css("bottom", "-90px"); //#roll-top是返回顶部的id clearTimeout(timmer); timmer = setTimeout(function() { clearTimeout(timmer) },100); });
css代码
#roll-top{position:fixed;top:auto;left:50%;margin-left:500px;bottom:-80px;z-index:999;width:45px;height:30px;cursor:pointer;text-align:center;font-size:19px;background:rgba(0,0,0,0.2);border-radius:3px}
其中 position:fixed、bottom:-80px 是关键