网页常用片段-回到顶部

weixin_30836759

于 2019-09-25 16:32:00 发布

阅读量118

点赞数

原文链接：http://www.cnblogs.com/congfeicong/p/11585645.html

版权

1、html

<div id="totop"></div>

2、css

#totop {
    width: 51px;
    height: 57px;
    cursor: pointer;
    position: fixed;
    right: 10px;
    top: 60%;
    background: #fff url(../images/totop.png) no-repeat center 50%;
    border: 1px solid #e2e2e2;
    opacity: 0.85;
    z-index: 100;
    display: none;
    mix-blend-mode: exclusion;
}
#totop:hover {
    opacity: 1;
}

3、js

$("#totop").click(function() {
  $("html,body").animate({scrollTop:0}, 300);
}); 
$(window).scroll(function () {
  if ($(window).scrollTop() > 800) {
    $("#totop").fadeIn(300);
  }
  else {
    $("#totop").fadeOut(300);
  }
});

转载于:https://www.cnblogs.com/congfeicong/p/11585645.html