实现置顶和置底效果

发表于 | 更新于 | 阅读次数 1
实现置顶和置底效果（PC网站常用）

  • 置顶效果

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    $(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);
    });

  • 置底效果

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    $(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);
    });