前言：

我们在开发网站时，如果网站的内容很长，则会出现很长的滚动条，这个时候如果要滚动到浏览器的顶部或者底部，用手工拖动滚动条就会显得有点不人性化，所以我们一般都会给网站加上回到顶部或者回到底部的功能，其实这些功能用js实现起来并不难，今天我就总结几个我们在开发网站时经常用到的js小功能。

代码样例：

1.滚动到页面顶部

我们可以使用 window.scrollTo() 平滑滚动到页面顶部。

const scrollToTop = () => {
  window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
};

2.滚动到页面底部
当然，如果知道文档的高度，也可以平滑滚动到页面底部。

const scrollToBottom = () => {
  window.scrollTo({
    top: document.documentElement.offsetHeight,
    left: 0,
    behavior: "smooth",
  });
};

3.将元素滚动到可见区域
有时候我们需要将元素滚动到可见区域，怎么办？使用 scrollIntoView 就足够了。

const smoothScroll = (element) => {
  element.scrollIntoView({
    behavior: "smooth",
  });
};

4. 以全屏模式显示元素
你一定遇到过这样的场景，需要全屏播放视频，在浏览器中全屏打开页面。

const goToFullScreen = (element) => {
  element = element || document.body;
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen();
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullScreen();
  }
};

5.退出浏览器全屏状态
是的，这个和第4点一起使用，你也会有退出浏览器全屏状态的场景。

// 堆代码 duidaima.com
const goExitFullscreen = () => {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  }
};

总结：

以上就是我们用js实现的滚动到浏览器顶部，滚动到浏览器底部，滚动到可视区域的功能代码。希望对你有所帮助。