返回顶部实现方式

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;

  width: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'
});
});