js实现点击按钮返回顶部

最新推荐文章于 2024-03-19 10:15:00 发布

原创

最新推荐文章于 2024-03-19 10:15:00 发布 · 1.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #css

本文介绍了如何使用JavaScript实现一个功能，当网页滚动超过400像素时显示返回顶部按钮，点击按钮则平滑滚动到页面顶部，提升了用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当网页页面的高度很高时，鼠标往下滑动之后，再往上滑动才能返回页面顶部。这一点很容易给用户留下不好的体验感。利用html+css+JavaScript实现当往下滑动超过400像素后，显示按钮，点击可返回顶部，详细代码如下：
HTML代码：

<!--创建一个大盒子-->
<div id="box">
		<!--以下是点击的图片-->
        <div id="img">
        <!--此处可以是图片，按钮等等-->
            <img src="./image/top.png" alt="">
        </div>
        <!--以下可省略，但书写的原因是为了更方便查看-->
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5