在前端开发中，我们经常需要滚动页面浏览内容。但是很多时候，我们也需要快速返回到页面的顶部或者某个指定的位置。本文将介绍如何实现在一个 div 中滚动并返回到顶部的功能。
实现方法
首先，我们可以通过在 CSS 样式表中设置 overflow: auto 属性来使得一个 div 具有滚动条，从而让其中的内容可以滚动。接着，我们可以通过 JavaScript 来监听该 div 的滚动事件，并根据当前滚动位置来决定是否显示返回到顶部的按钮。
-- -------------------- ---- -------
---- ------------------ --------------------------
---- ------------ ---
------
------- -------------------------------------
--------
----- ---------- - --------------------------------------
----- ----------------- - ---------------------------------
-------- -------------- -
-- --------------------- - -- -
------------------------------- - --------
- ---- -
------------------------------- - -------
-
-
-------- ------------- -
--------------------- ---- -- --------- -------- ---
-
---------上述代码中，我们首先使用 querySelector 方法获取了具有 .scrollable 类名的 div 和按钮元素。然后，在 handleScroll 方法中，我们判断当前滚动位置是否大于 0，如果是，则显示返回顶部的按钮，否则隐藏按钮。最后，在 scrollToTop 方法中，我们调用 div 元素的 scrollTo 方法将滚动条滚动到顶部，并设置了平滑滚动的效果。
指导意义
本文介绍了如何实现在一个 div 中滚动并返回到顶部的功能，并提供了示例代码。这个功能在很多网站中都是非常实用的，例如当需要展示大量内容时，可以通过滚动的方式来让用户逐步浏览内容，同时也方便用户快速返回到页面的顶部或者某个指定位置。
同时，在实现这个功能的过程中，我们也学习了一些与前端开发相关的知识，例如 CSS 样式表中的 overflow 属性、JavaScript 事件监听和元素操作等。这些知识点对于前端开发人员来说是必备的基础知识，掌握它们可以帮助我们更好地完成各种任务。
总之，本文的目的是帮助读者了解如何实现滚动回到 div 的顶部的功能，并提供一些与前端开发相关的知识点作为参考，希望能够对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/13262