网站地图    收藏   

主页 > 前端 > javascript >

js,javascript,jquery网页返回顶部代码

来源:未知    时间:2015-06-12 11:25 作者:xxadmin 阅读:

[导读] 示意图:右下角 style . top { position : fixed ; display : none ; width : 55px ; height : 55px ; right : 50px ; bottom : 50px ; background : #D6D6D6;color: #fff;font-size: 36px;line-height: 55px;text-align: center; cursor : pointer ;...

示意图:右下角

<style>
.top {position: fixed;display: none;width: 55px;height: 55px;right: 50px;bottom: 50px;
background: #D6D6D6;color: #fff;font-size: 36px;line-height: 55px;text-align: center;
cursor: pointer;border-radius: 40px;transition-property: background;transition-duration: 0.5s;
-webkit-transition-property: background;-webkit-transition-duration: 0.5s;-moz-transition-property: background;
-moz-transition-duration: 0.5s;
}
</style>
<div class="top" style="display: block;"></div>
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){
if($(this).scrollTop()>100){
$('.top').fadeIn();}
else{
$('.top').fadeOut();} });
$('.top').click(function(){
$('body,html').animate({scrollTop:0},800);});
});

</script>

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论