开发总结--返回顶部
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了开发总结--返回顶部相关的知识，希望对你有一定的参考价值。
刚才在看文章时发现了一个常用的功能模块，这个模块就是返回顶部，这个经常被用到各种网站上，可以大大的提高友好度，提升用户的体验，我也研究了一下这个返回顶部的JS的代码，还是比较简单的，我就都不做注释了，只要你学过一点JS都能看懂是怎么写的，现在把代码贴上，供大家学习参考和摘抄!本人提供的所有的代码都经过测试的，确定了可以用才会发布上来的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//返回顶部
$(function() {
//这儿的代码是判断窗口当前的高度，是否是大于0，然后判断，隐藏和显示
var gototop = $("#gototop");
$(window).scroll(function() {
if ($(window).scrollTop() > 0) {
gototop.fadeIn(300);
} else {
gototop.fadeOut(300);
}
});
//这儿的代码是返回顶部被点击了之后执行的动作，其中.stop这一块，第一个true意思是停止当前的所有进行的操作，如果第二个是ture的话就是立即执行，但是砸门这儿是false所以
//后边跟了一个animate的动画操作，执行总计时间是0.5秒，其它的应该都能看懂了
gototop.click(function() {
$("body,html").stop(true, false).animate({
scrollTop: 0
}, 500);
return false;
});
});
</script>
<style type="text/css">
body {
font-size: 50px;
}
.gototop {
position: fixed;
right: 7px;
bottom: 10px;
display: block;
font-size: 18px;
width: 30px;
height: 30px;
background: #031523;
color: #fff;
text-align: center;
padding-top: 5px;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
display: none;
}
a:hover.gototop {
text-decoration: none;
background: #fff;
color: #000;
}
</style>
</head>
<body>
132
<br/> 132
<br/> 132
<br/> 132
<br/> 132
<br/>132
<br/>132
<br/>132
<br/>132
<br/>132
<br/>132
<br/>132
<br/>132
<br/>132
<br/>132
<br/>132
<br/>132
<br/>
<a href="javascript(0);" class="gototop" id="gototop" style="display: inline;">丄</a>
</body>
</html>
以上是关于开发总结--返回顶部的主要内容，如果未能解决你的问题，请参考以下文章
基于Metronic的Bootstrap开发框架经验总结（17）-- 使用 summernote插件实现HTML文档的编辑和图片插入操作