window对象

window方法

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'
});

滚动的三种方法

修改scrollTop、scrollLeft
element.scrollIntoView()
window.scroll()

Location对象

假设浏览器当前加载的 URL 是 http://foouser:barpassword@www.wrox.com:80/WileyCDA/?q=javascript#contents, location 对象的内容如下表所示。

History对象

前进后退

go()

// 后退一页
history.go(-1);
// 前进一页
history.go(1);
// 前进两页
history.go(2);

back()
forward()

// 后退一页
history.back();
// 前进一页
history.forward();

历史状态管理

状态管理API 则可以让开发者改变浏览器 URL 而不会加载新页面

history.pushState() 这个方法接收 3 个参数：一个 state 对象、一个新状态的标题和一个（可选的）相对 URL。

let stateObject = {foo:"bar"};
history.pushState(stateObject, "My title", "baz.html");

第二个参数并未被当前实现所使用，因此既可以传一个空字符串也可以传一个短标题。

replaceState() 传入与pushState()同样的前两个参数来更新状态。更新状态不会创建新历史记录，只会覆盖当前状态

history.replaceState({newFoo: "newBar"}, "New title");

BOM总结