开发总结--返回顶部

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>

以上是关于开发总结--返回顶部的主要内容,如果未能解决你的问题,请参考以下文章

ES6 常用总结(前端开发js技术进阶提升总结)

js练习总结

小程序开发知识点及坑点总结

基于Metronic的Bootstrap开发框架经验总结(17)-- 使用 summernote插件实现HTML文档的编辑和图片插入操作

(转)基于MVC4+EasyUI的Web开发框架经验总结--使用HTML编辑控件CKEditor和CKFinder

js返回顶部效果