pc 回到顶部
原创wg_iGBFcBFB 博主文章分类:Jquery ©著作权
©著作权归作者所有:来自51CTO博客作者wg_iGBFcBFB的原创作品,请联系作者获取转载授权,否则将追究法律责任
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>回到顶部</title>
<style>
#to_top {
width: 30px;
height: 40px;
font: 14px/20px arial;
text-align: center;
background: #06c;
position: fixed;
cursor: pointer;
color: #fff;
left: 1250px;
top: 500px;
}
</style>
</head>
<body style="height: 2000px;">
<div id="to_top">返回顶部</div>
<script src="jquery-1.10.1.js"></script>
<script>
$(function () {
// 运动总时长
var time = 300
// 每一帧动画的执行时间
var itemTime = 60
// 启动定时器 执行动画
$('#to_top').click(function(){
var offset = $('html').scrollTop() + $('body').scrollTop();
var itemOffset = offset/(time/itemTime);
var timer = setInterval(function(){
offset -= itemOffset;
if(offset <= 0){
offset = 0;
clearInterval(timer);
}
console.log(offset);
$('html,body').scrollTop(offset);
},itemTime)
})
});
</script>
</body>
</html>
上一篇:运算符
下一篇:jquery 添加删除记录练习
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
树莓派连接Windows10 PC以太网线上网
树莓派通过以太网口上网
树莓派 以太网 Windows10 -
回到顶部
回到顶部 - 豪情 运行代码
html xml javascript 3c css -
js回到顶部
回到顶部<!DOCTYPE html><html lan="en"><head
javascript css3 css html -
jq 回到顶部
jq 回到顶部jquery回到顶部的方法:核心代码:$("html,body").animate({ scrollTop: 0 }, 500
jq 回到顶部 jquery 回到顶部 html jquery 点击事件 -
关于回到顶部设计
: http://tieba.baidu.c...
回到顶部 百度贴吧 语义化 功能模块 -
iOS tableView 回到顶 iphone怎么回到顶部
这是scrollView的一个属性,返回值是bool类型,默认是yes,即默认情况下点击状态条就可以回到顶部.
iOS scrollViewToTop 自定义 属性设置