返回頂部JS

網頁常用返回頂部效果,滾動超過100按鈕顯示,點擊按鈕添加active實現按鈕向上移動逐漸消失動畫,返回到頂部時按鈕隱藏移除active。

CSS:

.gotop.active {
    -webkit-animation: top .8s;
    -o-animation: top .8s;
    animation: top .8s;
}
@keyframes top {
    0% {
        bottom: 20px;
        opacity: 1;
    }
    100% {
        bottom: 300px;
        opacity: 0;
    }
}

JS:

//返回頂部
$(".gotop").click(function () {
  $(this).addClass("active");
  $("html,body").animate({scrollTop:0}, 500);
});

$(window).scroll(function(){
  var st = $(window).scrollTop();
  if(st >= 100){
    $(".gotop").show();
  }
  else {
    $(".gotop").hide().removeClass("active");
  }
});

未經允許不得轉載:小網站 » 返回頂部JS

贊 (0)

評論 0

  • 昵稱 (必填)
  • 郵箱 (必填)
  • 網址
丧尸之战2丧尸来袭电影
赛车pk10技巧 内蒙古时时开奖号码 球棎比分足球即时比分 重庆时时走势图 赛车pk10专家预测 快乐时时官方网址 澳洲幸运五开奖软件下载 北京pk赛车开奖记录 网上玩龙虎有什么技巧 易游eu8com网页登录下载 单双大小投注技巧大全 三公技巧免费视频教程 博狗是不是私人平台 欢乐生肖免费计划 上海时时开奖走时图 怎样刷9码最稳