网站添加简单的返回顶部特效

首先引入js代码:

$(function(){          //当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失          $(function () {              $(window).scroll(function(){                  if ($(window).scrollTop()>100){                      $("#backtop").css("bottom","1px");                  }                  else                  {                      $("#backtop").css("bottom","-100px");                  }              });                 //当点击跳转链接后,回到页面顶部位置              $("#backtop").click(function(){                  //$('body,html').animate({scrollTop:0},1000);          if ($('html').scrollTop()) {                  $('html').animate({ scrollTop: 0 }, 1000);                  return false;              }              $('body').animate({ scrollTop: 0 }, 1000);                   return false;                         });              });      });

CSS部分:

#backtop{position:fixed;right:7.5%;bottom:-100px;z-index:2;overflow:auto;width:54px;height:54px;border-top-right-radius:50px;border-top-left-radius:50px;background-image:url(btt.png);background-position:0 0;cursor:pointer;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out}

html部分:

<div id="backtop" title="返回顶部" style="bottom: -100px;"></div>

演示图

网站添加简单的返回顶部特效,874b1ff74cf5b292.jpg,分享,教程,建站,经验,百度,技术,第1张


相关文章

您需要 登录账户 后才能发表评论

发表评论 取消回复

电子邮件地址不会被公开。 必填项已用*标注