javascript基础从小白到高手系列八十二：视口位置

浏览器窗口尺寸通常无法满足完整显示整个页面，为此用户可以通过滚动在有限的视口中查看文
档。度量文档相对于视口滚动距离的属性有两对，返回相等的值：window.pageXoffset/window.
scrollX 和window.pageYoffset/window.scrollY。
可以使用scroll()、scrollTo()和scrollBy()方法滚动页面。这3 个方法都接收表示相对视口距
离的x 和y 坐标，这两个参数在前两个方法中表示要滚动到的坐标，在最后一个方法中表示滚动的距离。
// 相对于当前视口向下滚动100 像素
window.scrollBy(0, 100);
// 相对于当前视口向右滚动40 像素
window.scrollBy(40, 0);
// 滚动到页面左上角
window.scrollTo(0, 0);
// 滚动到距离屏幕左边及顶边各100 像素的位置
window.scrollTo(100, 100);
这几个方法也都接收一个ScrollToOptions 字典，除了提供偏移值，还可以通过behavior 属性
告诉浏览器是否平滑滚动。
// 正常滚动
window.scrollTo({
left: 100,
top: 100,
behavior: ‘auto’
});
// 平滑滚动
window.scrollTo({
left: 100,
top: 100,
behavior: ‘smooth’
});
导航与打开新窗口
window.open()方法可以用于导航到指定URL，也可以用于打开新浏览器窗口。这个方法接收4
个参数：要加载的URL、目标窗口、特性字符串和表示新窗口在浏览器历史记录中是否替代当前加载页
面的布尔值。通常，调用这个方法时只传前3 个参数，最后一个参数只有在不打开新窗口时才会使用。
如果window.open()的第二个参数是一个已经存在的窗口或窗格（frame）的名字，则会在对应的
窗口或窗格中打开URL。下面是一个例子：
// 与相同
window.open(“http://www.wrox.com/”, “topFrame”);
执行这行代码的结果就如同用户点击了一个href 属性为"http://www.wrox.com"，target 属
性为"topFrame"的链接。如果有一个窗口名叫"topFrame"，则这个窗口就会打开这个URL；否则就
会打开一个新窗口并将其命名为"topFrame"。第二个参数也可以是一个特殊的窗口名，比如_self、
_parent、_top 或_blank。