返回頂部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

  • 昵稱 (必填)
  • 郵箱 (必填)
  • 網址

如果覺得文章有用就支持一下~

支付寶掃一掃打賞

微信掃一掃打賞

什么是期货平台 pk104码2468技巧 陕西快乐十分钟预测 福建快3开奖 王中王心水!高手论坛 山东时时导航 北京时时百科 寶寶平特 pk赛车官网开结果 重庆时时破译 重庆时时彩走势图五星综合走势图