scroll家族
2018-03-28 本文已影响4人
追逐_chase
timg.jpg
scrollTop
-
是指当你滑动滚轮浏览网页隐藏在品目上方的距离
scrollTop.jpg
-
onscroll 是页面滚动的事件
- 谷歌浏览器 和没有声明 DTD <DOCTYPE > ：使用 document.body.scrollTop;
- 火狐 和其他浏览器 使用： document.documentElement.scrollTop;
- ie9+ 和 最新浏览器 都认识 window.pageXOffset; pageYOffset （scrollTop）
- document.compatMode判断是否怪异浏览器 CSS1Compat 已经声明，BackCompat 未声明
scrollTop.jpg
// 对获取scrollTop的封装
<script type="text/javascript">
function scrool() {
if (window.pageYOffset != null){
return{
left:window.pageXOffset,
top:window.pageYOffset
}
}else if (document.compatMode == "CSS1Compat"){
return{
left:document.documentElement.scrollLeft,
top:document.documentElement.scrollTop
}
}
return{
left:document.body.scrollLeft,
top:document.body.scrollTop
}
}
window.onscroll = function () {
console.log(scrool().top);
}
</script>
scrollTo(x,y)
-
window.scrollTo(15,15); 把内容滚动到指定的坐标
-
案例
js文件
/返回元素
function $(id) {
return document.getElementById(id);
}
//显示
function show(objc) {
objc.style.display = "block";
}
//隐藏
function hide(objc) {
objc.style.display = "none";
}
//滚动 加载的 top 和 left
function scroll() {
if (window.pageYOffset != null){
return {
left:window.pageXOffset,
top:window.pageYOffset
}
}else if (window.compatMode == "CSS1Compat"){
return {
left:document.documentElement.scrollLeft,
top:document.documentElement.scrollTop
}
}
return{
left:document.body.scrollLeft,
top:document.body.scrollTop
}
}
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小火箭返回顶部</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.top {
position: fixed;
right: 50px;
bottom: 100px;
display: none;
}
body{
width: 2000px;
}
</style>
<script src="myjs.js"></script>
</head>
<body>
<div id="gotop" class="top">
<img src="Top.jpg" alt="">
</div>
<div id="demo">
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
<p>天王盖地虎，小鸡炖蘑菇</p>
</div>
</body>
</html>
<script type="text/javascript">
var gotop = $("gotop");
//滚动的情况
window.onscroll = function () {
scroll().top > 0 ? show(gotop) : hide(gotop);
leader = scroll().top;
}
var leader = 0;
var target = 0;
var timer = null;
//点击事件
gotop.onclick = function () {
target = 0;
timer = setInterval(function () {
//leader 起始位置 target目标位置
leader = leader + (target - leader)/10;
window.scrollTo(0,leader);
if (leader == target){
clearInterval(timer);
}
},30);
}
</script>
110.gif
