8.16总结
- 一、location对象
- location对象里的方法
- 1.location.reload
- 2.location.assign(&＃39;新的地址&＃39;)
- 3.location.replace(&＃39;新的地址&＃39;)
- 二、window对象
- 1.window.navigator对象
- 2.window.navigator.userAgent
- 3.window.navigator.appName
- 4.window.navigator.platform
- 三、history历史记录
- 1.window.history.back()
- 2.window.history.forward()
- 3.window.history.go(参数)
- 四、scroll 浏览器滚动
- 1.window.onscroll
- 2.document.documentElement.scrollTop
- 3.document.documentElement.scrollLeft
- 4.document.body.scrollTop
- 5.document.body.scrollLeft
- 6.window.pageYOffset 垂直方向
- 7.window.pageXOffset 水平方向
- 8.设置浏览器滚动到指定的位置
- window.scrollTo(横向坐标,纵向坐标)
- window.scrollTo({top:0,left:0,behavior:"smooth"})
一、location对象
location对象里的方法
1.location.reload
- 作用&＃xff1a;重新刷新加载页面&＃xff0c;相当于按下了浏览器左上角的刷新按钮
- 注意&＃xff1a;页面刷新语句不要写在一打开页面就可以执行的地方&＃xff0c;否则一进来就刷新会造成死循环,页面刷新多和按钮配合使用
2.location.assign(‘新的地址’)
- 作用&＃xff1a;重定向页面&＃xff0c;和href一样&＃xff0c;可以实现页面的跳转
3.location.replace(‘新的地址’)
- 作用&＃xff1a;替换当前的页面 因为不记录历史记录&＃xff0c;所以不能回退
二、window对象
1.window.navigator对象
- 作用&＃xff1a; window.navigator对象就是用来记录浏览器的版本信息&＃xff08;常用属性&＃xff09;
2.window.navigator.userAgent
- 作用&＃xff1a;返回用户当前使用的浏览器版本及型号信息
3.window.navigator.appName
【注意】所有的浏览器返回值都是统一的名字&＃xff0c;向网景致敬&＃xff08;ie低版本除外&＃xff09;
4.window.navigator.platform
三、history历史记录
- window下有一个history对象&＃xff0c;里面包含了一些操作历史的记录属性和方法
- 作用&＃xff1a;可以操作浏览器的前进和后退
- history包含用户的访问过的url
1.window.history.back()
- 作用&＃xff1a;回退到上一条历史记录&＃xff0c;相当于点击浏览器左上角的后退按钮
- 前提条件&＃xff1a;要有上一条历史记录
2.window.history.forward()
- 作用&＃xff1a;前进到到下一条历史记录&＃xff0c;相当于点击浏览器左上角的前进按钮
- 前提条件&＃xff1a;需要回退以后才能前进
3.window.history.go(参数)
- 参数数为正值时是 前进
- 参数数为负值时是 后退
- 参数为0 刷新
例&＃xff1a;
<button id&＃61;"back">back</button><button id&＃61;&＃39;forward&＃39;>forward</button><button id&＃61;&＃39;refresh&＃39;>刷新</button><script>back.onclick &＃61; function () {window.history.go(-1)}forward.onclick &＃61; function () {window.history.go(1)}refresh.onclick &＃61; function () {window.history.go(0)}console.log(window.history);
四、scroll 浏览器滚动
1.window.onscroll
- 浏览器滚动事件&＃xff0c;当页面发生滚动的时候触发&＃xff0c;不论是上下滚动还是水平方向上的滚动
- scroll系列可以动态的获取到元素的大小&＃xff0c;滚动距离
- 语法&＃xff1a;元素.scrollTop
- 返回元素被卷上去上侧的距离&＃xff0c;返回值不带单位
- 可读写的属性&＃xff1a;写入的时候可以使页面瞬间滚动到指定的位置
2.document.documentElement.scrollTop
- 使用时必须要有DOCTYPE&＃xff0c;如果没有获得滚动高度一直是0
- 作用&＃xff1a;返回页面被卷上去的头部的距离
3.document.documentElement.scrollLeft
- 使用时必须要有DOCTYPE&＃xff0c;如果没有获得滚动宽度一直是0
- 作用&＃xff1a;返回页面被卷进去的左侧的距离
4.document.body.scrollTop
5.document.body.scrollLeft
- 返回页面被卷进去的高度和宽度
- 使用时必须没有DOCTYPE&＃xff0c;如果有获得滚动宽度一直是0
6.window.pageYOffset 垂直方向
7.window.pageXOffset 水平方向
【注意】新增的 ie9以上版本才支持
【兼容写法】
- 必须没有DOCTYPE
- 使用短路来处理兼容性问题的一个前提条件就是不能报错
- 使用逻辑运算符来处理兼容性问题&＃xff0c;当前面的值为0 的时候&＃xff0c;会执行后面的&＃xff0c;前面的值不为0时&＃xff0c;则直接使用前面的返回值
document.body.scrollTop||document.documentElement.scrollTop||window.pageYOffset
document.body.scrollLeft||document.documentElement.scrollLeft||window.pageXOffset
8.设置浏览器滚动到指定的位置
window.scrollTo(横向坐标,纵向坐标)
- 注意&＃xff1a;参数值不带单位&＃xff0c;参数必须是两个参数&＃xff0c;否则就会报错(瞬间定位)
window.scrollTo({top:0,left:0,behavior:“smooth”})
- 如果参数是一个对象&＃xff0c;对象里的属性写几个都可以
- 特点&＃xff1a;可以设置第三个配置项来决定页面滚动是瞬间定位还是平滑移动
- behavior 翻译&＃xff1a;行为
- behavior&＃xff1a;instant 立即
- behavior&＃xff1a;smooth
【注意】如果设置了平滑滚动&＃xff0c;页面不轮滚动的距离是多少&＃xff0c;所花费的时候基本上是一样&＃xff0c;这样就说明了, 不同的滚动距离的滚动速度是不一样的。
若果我们想要页面滚动距离大时花费时间久&＃xff0c;距离小话费时间短&＃xff0c;也就是说想要滚动的速度是一样的&＃xff0c;就自己写方法实现了&＃xff0c;原生的api达不到这样的效果。
案例&＃xff1a;
DOCTYPE html>
<html lang&＃61;"en">
<head><meta charset&＃61;"UTF-8"><meta http-equiv&＃61;"X-UA-Compatible" content&＃61;"IE&＃61;edge"><meta name&＃61;"viewport" content&＃61;"width&＃61;device-width, initial-scale&＃61;1.0"><title>Documenttitle><style>#box{width: 100%;height: 5200px;background: cornflowerblue;}#btn{position: fixed;bottom: 30px;right: 30px;}style>
head>
<body><div id&＃61;"box">内容div><button id&＃61;"btn">点击回到顶部button><script>var timer;btn.onclick &＃61; function(){timer &＃61; setInterval(function(){document.documentElement.scrollTop -&＃61; 60;if(document.documentElement.scrollTop <&＃61; 0){clearInterval(timer)}console.log(document.documentElement.scrollTop);},20)}var topNum &＃61; 0;window.onscroll &＃61; function(){if(document.documentElement.scrollTop > topNum){clearInterval(timer)}topNum &＃61; document.documentElement.scrollTop}script>
body>
html>
京公网安备 11010802041100号