本站停止维护,已转移至laravel学习网;欢迎大家移步访问!

jquery实现缓慢弹性返回页面顶部并美化

网站中,我们经常会遇到需要网站滚动到顶部的特效,为了页面不太生硬,我们使用缓慢滚动

话不多说,我们直接开始:

  1. 写一个div,这个就是一些基础的样式设计,我这里初步美化,你可以更加一步的美化,你高兴,就OK

  2. 我们这个div默认是要隐藏的,防止加载网页就显示

  3. 吊用JQ库,无需多说

  4. JQ获取屏幕滚动,具体参数在本网站收一下就知道了

  5. 设置开始显示高度,就是滚动到哪里开始显示回滚条,这里就是一个显示和改变CSS的操作,很简单

  6. 当我们点击滚动时执行回滚操作,这是一种方法,还可以直接定义div onclick时间,这样完美解决兼容或者冲突问题,这里就是设置一个时间的一个缓慢滚动,并且隐藏掉div

    好了,能运行的代码比啥都重要,直接贴代码:

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>点击回顶部</title>
<style>
#gotop {
position: fixed;
line-height:36px;
width:42px;
bottom:35px;
height:42px;
cursor:pointer;
display:none;
background:#FFCC66;
z-index: 888;
margin-right: 10px;
}
</style>
</head>
<body style="height:3000px;">
<div id="gotop"></div>
<script type="text/javascript" src="http://blog.earnp.com/js/jquery.min.js"></script>
<script type="text/javascript">
  $(window).scroll(function(){
     var sc=$(window).scrollTop();
     var rwidth=$(window).width()
    if(sc>100){
    $("#gotop").css("display","block");
    $("#gotop").css("left",(rwidth-66)+"px")
    }else{
   $("#gotop").css("display","none");
    }
    })
   $("#gotop").click(function(){
    var sc=$(window).scrollTop();
   $('body,html').animate({scrollTop:0},500);
    })  
</script>
</body>
</html>


转载请注明 :一沙网络原文出处:http://bbs.earnp.com/article/69
问题交流群 :562864481
0
打赏
发布时间 :2016-08-16 00:25:58
分享

1 个评论

  • 一沙
    回复
    2016-08-16 00:39
    加一个美化: #gotop { position: fixed; line-height:36px; box-sizing: border-box; opacity: 0.8; width:42px; bottom:40px; height:42px; cursor:pointer; display:none; background:#75d0c9; z-index: 888; margin-right: 10px; text-align: center; line-height: 46px; font-size: 17px; border-radius: 4px; } #gotop i{ color: #FFF; }

要回复文章请先登录注册