在页面中内容很多时,常常需要一键置顶的功能。即页面的右下角会显示一个向上的箭头,点击一下,就直接滚动到页面最上面。当滑动到第一页时,此时不需要置顶,置顶的箭头自动隐藏。
大家观察一下,内容较多在门户网站,例如新浪、网易均有这样的功能。那这个小功能是如何实现的呢? 直接上代码吧
<div class="content"> <p>等你, 在雨中, 在造虹的雨中 蝉声沉落, 蛙声升起 一池的红莲如红焰, 在雨中 你来不来都一样, 竟感觉 每朵莲都像你 尤其隔着黄昏, 隔着这样的细雨 永恒, 刹那, 刹那, 永恒 等你, 在时间之外在时间之内, 等你, 在刹那, 在永恒 如果你的手在我的手里, 此刻 如果你的清芬 在我的鼻孔, 我会说, 小情人 </p> </div> <div class="goToTop none"> 置顶 </div>
$('body').on('click', 'p', function () { var _this = $(this); var copyed = _this.clone(true); _this.after(copyed); }); $(window).on('scroll', function () { var scrollTop = $('body').scrollTop(); if (scrollTop > 300) { $('.goToTop').removeClass('none'); }else { $('.goToTop').addClass('none'); } }); $('.goToTop').on('click', function(){ $('body').scrollTop(0); });
css
.goToTop { position: fixed; right: 0; bottom: 10px; z-index: 200; width: 20px; background-color: #2e6da4; }
注:这里偷人懒,用文字“置顶”代替了箭头。置顶的文字(或箭头)应该始终在页面右下角区域,并且是可见状态,所以需要是position: fixed。