返回頂部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丧尸来袭电影
四不像图一肖中特 内蒙古快三预测专家预测分析 大奖网app官方下载 北京赛 极速平特一肖计划 黑龙江十一选五走势图表 上海快3最新开奖定牛 浙江快乐12任三技巧 天津快乐十分走势福彩 老时时重庆时时360 酷彩吧在哪里下载 天津快乐十分走势图100 北京赛记录查询 一肖一码期期准1一3码 时时开奖号码96 北京pk计划费下载