<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div id="wrap">
<div id="top" class="header" data-reactid=".0.0">
<div class="wrapper clearfix" data-reactid=".0.0.0"><a class="logo" href="/p/index.html" data-reactid=".0.0.0.0"></a>
<div class="search-box" data-reactid=".0.0.0.1"><input type="text" value="" data-reactid=".0.0.0.1.0">
<div class="search-btn" data-reactid=".0.0.0.1.1"></div>
<div class="hot-words" data-reactid=".0.0.0.1.2"><a data-reactid=".0.0.0.1.2.$0">趣味测试</a><a data-reactid=".0.0.0.1.2.$1">魁拔</a><a data-reactid=".0.0.0.1.2.$2">迪丽热巴</a>
<a
data-reactid=".0.0.0.1.2.$3">吴亦凡</a><a data-reactid=".0.0.0.1.2.$4">鹿晗</a></div>
</div>
<div class="user-wrapper" data-reactid=".0.0.0.2">
<div class="login-wrap" data-reactid=".0.0.0.2.0"><a class="btn-login" href="javascript:void(0)" data-reactid=".0.0.0.2.0.0">登录</a></div>
</div>
<div class="links" data-reactid=".0.0.0.3">
<div class="slide-down-container admin-links" data-reactid=".0.0.0.3.1">
<div class="title" data-reactid=".0.0.0.3.1.0"><span data-reactid=".0.0.0.3.1.0.0"></span><span class="title-span" data-reactid=".0.0.0.3.1.0.1">部落管理</span>
<i
class="slide-down-icon" data-reactid=".0.0.0.3.1.0.2"></i>
</div>
<ul class="slide-down-content" data-reactid=".0.0.0.3.1.1">
<li data-reactid=".0.0.0.3.1.1.$=10"><a target="_blank" href="/buluoadmin/home.html" data-reactid=".0.0.0.3.1.1.$=10.0">运营平台</a></li>
<li
data-reactid=".0.0.0.3.1.1.$=11"><a target="_blank" href="/apply.html" data-reactid=".0.0.0.3.1.1.$=11.0">创建部落</a></li>
</ul>
</div>
<div class="slide-down-container help-links" data-reactid=".0.0.0.3.2">
<div class="title" data-reactid=".0.0.0.3.2.0"><span data-reactid=".0.0.0.3.2.0.0"></span><span class="title-span" data-reactid=".0.0.0.3.2.0.1">帮助</span>
<i
class="slide-down-icon" data-reactid=".0.0.0.3.2.0.2"></i>
</div>
<ul class="slide-down-content" data-reactid=".0.0.0.3.2.1">
<li data-reactid=".0.0.0.3.2.1.$=10"><a target="_blank" href="/tribe.html" data-reactid=".0.0.0.3.2.1.$=10.0">部落简介</a></li>
<li data-reactid=".0.0.0.3.2.1.$=11"><a target="_blank" href="http://kf.qq.com/product/buluo.html" data-reactid=".0.0.0.3.2.1.$=11.0">帮助中心</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="cls" id="content">
<img src="images/content.png" width="100%">
</div>
<!-- http://buluo.qq.com/p/detail.html?bid=17266&pid=9498777-1455945612&from=grp_sub_obj -->
</div>
<div class="to-top" id="totop"></div>
<script src="js/common.js"></script>
<script src="js/index.js"></script>
<script>
// 获取元素
var wrap = my$('wrap');
var bodyTop = my$('top');
var content = my$('content');
var toTop = my$('totop');
// 1.当文本内容滚动大于10,top高度减小,totop显示
window.onscroll = function() {
// 获取滚动出去内容的高度 scrollTop 存在兼容
// var scrollTop = document.body.scrollTop;
// var scrollTop = document.documentElement.scrollTop;
var scrollTop = getScroll().scrollTop;
if (scrollTop > 10) {
// top是window对象的属性,是只读属性,这里不能使用top做变量
bodyTop.classList.add('fixed');
toTop.style.display = 'block';
}else{
bodyTop.classList.remove('fixed');
toTop.style.display = 'none';
}
};
// 2.当点击totop时,页面滚动到最顶部,top恢复
// 使用定时器
var timeId = null;
toTop.onclick = function() {
// 如果正在执行
if (timeId) {
clearInterval(timeId);
timeId = null;
}
timeId = setInterval(function() {
// 设置步径
var step = 10;
// 设置目标位置,回到顶部,所以目标位置是0
var target = 0;
// 设置当前位置,当前位置应该是滚动出去的高度
var current = getScroll().scrollTop;
// 如果当前位置大于目标位置,step应该为负数
if (target < current) {
step = -Math.abs(step);
}
// 如果当前位置 - 目标位置的值小于步径,停止定时器 ,让当前位置等于,目标位置
if (Math.abs(current - target) < Math.abs(step)) {
clearInterval(timeId);
current = target;
document.body.scrollTop = current;
document.documentElement.scrollTop = current;
return;
}
// 否则执行
current += step;
document.body.scrollTop = current;
document.documentElement.scrollTop = current;
}, 5);
};
</script>
</body>
网友评论