返回顶部实现方式

时间:2022-03-18 10:04:49

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