js返回顶部实例分享

1、HTML结构

<div class="return_top"></div>

2、css样式

.return_top{
width: 50px;
height: 50px;
background: url(../images/lanren.gif) no-repeat center #FF8D16;
position:fixed;
right: 30px;
bottom: 30px;
display: none;
cursor: pointer;
z-index: 99;
}

3、js效果

<script>
$(function(){
$(window).scroll(function(){
var topDistance=$(window).scrollTop();  //获取鼠标在本窗口现有状态下移动的高度
if(topDistance>100){  //如果移动高度大于100px,顶部图标单单显示出，如果移动高度小于等于100，顶部图标不显示
$('.return_top').fadeIn(800);
}else{
$('.return_top').fadeOut(800);
}
});
$('.return_top').on('click',function(){
$('html,body').animate({scrollTop:0},800); //必须用$('html,body')选择，不然没效果
})
});
</script>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

您可能感兴趣的文章:

• js+JQuery返回顶部功能如何实现
• 一个简单的弹性返回顶部JS代码实现介绍
• javascript返回顶部效果(自写代码)
• js简单的点击返回顶部效果实现方法
• jQuery实现返回顶部功能适合不支持js的浏览器
• javascript实现博客园页面右下角返回顶部按钮
• javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
• 原生js实现返回顶部缓冲效果
• js实现返回顶部效果
• JS返回顶部实例代码