首页 > 编程 > JavaScript > 正文

jquery实现的鼠标下拉滚动置顶效果

2019-11-20 14:19:53
字体:
来源:转载
供稿:网友
$(function(){     //置顶按钮显示/隐藏实现     $(window).scroll(function(){       var w_height = $(window).height();//浏览器高度       var scroll_top = $(document).scrollTop();//滚动条到顶部的垂直高度       if(scroll_top > w_height){           $("#goto-top").fadeIn(500);         }else{           $("#goto-top").fadeOut(500);       }     });   //置顶   $("#goto-top").click(function(e){       e.preventDefault();       $(document.documentElement).animate({         scrollTop: 0         },200);       //支持chrome       $(document.body).animate({         scrollTop: 0         },200);     });   }) </script> <style type="text/css">   #goto-top {     display:none;     position:fixed;     width:38px;     height:36px;     background:url(images/goto-top.png) no-repeat 0 0;     bottom:40px;     right:40px;     -webkit-transition:all 0.2s;     -moz-transition:all 0.2s;     -o-transition:all 0.2s;     transition:all 0.2s;     z-index:9999;   }   #goto-top:hover {     background:url(images/goto-top.png) no-repeat 0 -36px;   } </style> </head>
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表