JS实现带动画的回到顶部效果
更新时间：2017年12月28日 09:39:31 作者：夏尔_
这篇文章主要为大家详细
介绍了JS实现带动画的回到顶部效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JS实现带动画的回到顶部效果的具体代码，供大家参考，具体内容如下
实现功能：滚动到页面某一个高度的时候，回到顶部按钮出现。点击之后回到网页顶部，按钮隐藏。
代码如下，jQuery引用的是百度CDN的，因此整段代码复制下来后在浏览器运行即可。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>实现回到顶部功能</title>
</head>
<style>
* {
padding: 0;
margin: 0;
}
.gotop {
display: none;
position: fixed;
bottom: 50px;
right: 50px;
width: 40px;
height: 40px;
padding: 5px;
background-color: #F00;
color: #FFF;
text-align: center;
cursor: pointer;
}
</style>
<script src="http://libs.baidu.com/jquery/1.8.1/jquery.min.js"></script>
<body>
<p>这是一段文字</p><br /><br /><br /><br /><br /><br />
<p>这是一段文字</p><br /><br /><br /><br /><br /><br />
<p>这是一段文字</p><br /><br /><br /><br /><br /><br />
<p>这是一段文字</p><br /><br /><br /><br /><br /><br />
<p>这是一段文字</p><br /><br /><br /><br /><br /><br />
<p>这是一段文字</p><br /><br /><br /><br /><br /><br />
<p>这是一段文字</p><br /><br /><br /><br /><br /><br />
<p>这是一段文字</p><br /><br /><br /><br /><br /><br />
<p>这是一段文字</p><br /><br /><br /><br /><br /><br />
<p>这是一段文字</p><br /><br /><br /><br /><br /><br />
<div id="goTop" class="gotop">
<p>回到</p>
<p>顶部</p>
</div>
</body>
<script>
function goTop() {
$(window).scroll(function() {
var $scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; //兼容浏览器
if($scrollTop > 100) { //滚动高度可调
$("#goTop").show();
} else {
$("#goTop").hide();
};
})
$("#goTop").on("click", function() {
$("body").stop().animate({
scrollTop: 0
});
})
}
goTop();
</script>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了使用p5.js实现动态GIF图片临摹重现，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-10-10
想起自己很久以前学习javascript的经历，也曾经碰到过几个由匿名函数造成的困扰（其中一个就是由闭包引起的），下面就整理几段简单代码讨论一下，让我们大家一起进步。2010-06-06
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
js+html5 canvas实现的涂鸦画板特效,可调画笔颜色|粗细|橡皮,可以保存涂鸦效果为图片编码，测试了下还不错，感兴趣的朋友可以参考下2013-04-04
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
下面小编就为大家带来一篇js的form表单提交url传参数(包含+等特殊字符)的两种解决方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
这篇文章主要为大家介绍了使用canvas实现音乐频谱示例及技术分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-12-12
request请求获取参数的实现方法(post和get两种方式)
下面小编就为大家带来一篇request请求获取参数的实现方法(post和get两种方式)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-09
最近做的任务提了新的需求,需要实现一个树形结构,所以下面这篇文章主要给大家介绍了关于js将列表组装成树结构的两种实现方式,需要的朋友可以参考下2022-01-01
这篇文章主要简单介绍了JavaScript Math和Number对象的相关资料,需要的朋友可以参考下2015-01-01
[红色]CSS+JS构建的图片查看器...2006-07-07
本文主要介绍了uniapp 实现微信小程序全局分享的示例代码，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-12-12
最新评论