开发总结--返回顶部

刚才在看文章时发现了一个常用的功能模块，这个模块就是返回顶部，这个经常被用到各种网站上，可以大大的提高友好度，提升用户的体验，我也研究了一下这个返回顶部的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>

</html>

秒客网

开发总结--返回顶部

相关文章