js返回顶部实例分享
更新时间：2016年12月21日 11:06:26 作者：以茜为贵
本文主要分享了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>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
这篇文章主要介绍了倒记时60刷新网页的js代码,需要的朋友可以参考下2014-02-02
这篇文章主要介绍了JavaScript判断页面加载完之后再执行预定函数的技巧,原理还是利用监听器监听元素事件、被触发则执行函数,需要的朋友可以参考下2016-05-05
这篇文章主要介绍了JS生成随机字符串的方法,需要的朋友可以参考下2014-06-06
这篇文章主要介绍了小程序实现左滑删除的效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-10-10
innertext , insertadjacentelement , insertadjacenthtml , ins
innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别...2007-06-06
asp.net webform中获取服务器控件,js脚本获取服务器控件需要使用ClientID，下面有个示例，大家可以参考下2014-05-05
这篇文章主要为大家详细介绍了使用JavaScript将图像转换为黑白二值图的两种方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-01-01
这篇文章主要为大家详细介绍了微信小程序实现下拉框功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
这篇文章主要介绍了使用JS获取当前地理位置方法汇总,需要的朋友可以参考下2014-12-12
在前端开发中,常用的数据加密技术包括Base64编码、MD5哈希、SHA-256哈希、AES对称加密、RSA非对称加密和HMAC消息认证码,这些加密方式提供了不同层次的数据安全保护,适用于不同的安全需求和场景,需要的朋友可以参考下2024-09-09
最新评论