jQuery实现置顶和置底效果

Date: 2017-04-03

• 置顶效果

$(window).on('scroll', function() {
  if ($(window).scrollTop() >= 100) { // 滚动了100之后显示
    $('.gotopbox').fadeIn(300);
  } else {
    $('.gotopbox').fadeOut(300);
  }
});
$('.gotopbox').on('click', function(){ // 点击置顶
  $('html, body').animate({
    scrollTop: '0px'
  }, 500);
});

• 置底效果

$(window).on('scroll', function() {
  if ($(window).scrollTop() >= 100) { // 滚动了100之后显示
    $('.gotopbox').fadeIn(300);
  } else {
    $('.gotopbox').fadeOut(300);
  }
});
$('.gobottombox').on('click', function(){ // 点击置顶
  $('html, body').animate({
    scrollTop: document.body.clientHeight+'px'
  }, 500);
});