1锚链接的实现
<a id="backBtn"
style="
position:fixed;top:75%;left:50%;
text-decoration:none;
cursor:pointer;
margin-top:-50px;
margin-left:640px;padding:3px 4px;
40px;text-align:center;border:1px solid #e0e0e0;
background:#fff;display: none;"
href="#nav">顶部</a>
href 对应顶部nav的定位容器id值。当出现滚动时,高度大于900,返回顶部按钮显示,否则隐藏。
var $body = $('html, body');
var W= window,D=document;
var backtopBtn = $('#backBtn');
$(window).scroll(function () {
backtopShow();
});
function backtopShow() {
var top = W.pageYOffset || D.documentElement.scrollTop || D.body.scrollTop;
if(top>900){
backtopBtn.fadeIn(100);
}else {
backtopBtn.fadeOut(100);
}
};
方法二:
引用jquery库和jquery.goup.min.js到你的页面,调用插件即可。
$(document).ready(function () {
$.goup({
trigger: 100,
bottomOffset: 150,
locationOffset: 30,
containerColor:'#444'
});
});