返回顶部代码咋写？手把手教你轻松实现！

今天来跟大家聊聊我最近做的一个小玩意儿——“回到顶部”按钮。说起来挺简单的，但实际动手做起来，还是有点小门道的，整个过程还挺有意思，所以我就琢磨着，还是记录下。

起因是啥？

最近，我不是在优化自己的个人博客嘛博客文章一长，读者想回到顶部就得费劲地往上滚动鼠标，或者拖动滚动条，那叫一个麻烦！特别是对那些喜欢用手机看文章的朋友来说，那小屏幕，手指头都快滑出火星，体验贼差。我就想，得整个“回到顶部”按钮，让大伙儿看得舒心点。

准备工作

• 我得先把这个按钮给画出来。我平时用的是一个叫Layui的框架，这玩意儿里面自带有现成的图标，我就直接拿来用，省事儿。找个向上的箭头图标，就它！

• 然后，我就开始琢磨着把这个按钮放到哪儿合适。经过一番深思熟虑，我决定把它固定在页面的右下角，离右边和底部分别15个像素的距离。为啥是15个像素？没啥特别的，看着顺眼罢。

• 为让这个按钮看起来不那么突兀，我还给它加个半透明的灰色背景，大小，就定个50像素宽、100像素高，我觉得这样既醒目又不太占地方，刚刚

开工

我先是用 HTML 把按钮的基本结构给搭出来：

<div class="fix_bar">

<i class="layui-icon layui-icon-top"></i>

</div>

这个<div>标签就是按钮的容器，<i>标签则是 Layui 框架提供的图标，layui-icon-top 这个类名表示使用向上的箭头图标。

然后，我开始用 CSS 给这个按钮“化妆”：

.fix_bar {

position: fixed; / 关键！让按钮固定在页面上 /

right: 15px; / 距离右边15像素 /

bottom: 15px; / 距离底部15像素 /

z-index: 9999; / 确保按钮在最上层，不会被其他元素遮挡 /

cursor: pointer; / 鼠标悬停时变成小手形状 /

width: 50px;

height: 100px;

background-color: rgba(102, 102, 102, 0.5); / 半透明灰色背景 /

text-align: center;

line-height: 100px;

.layui-icon-top {

font-size: 24px; / 调整图标大小 /

color: #fff; / 图标颜色设置为白色 /

关键一步：JavaScript

光有样子还不行，得让这个按钮真正能“动”起来。这里，我就用到 JavaScript：

<script>

// 获取按钮元素

var backToTopButton = *('.fix_bar');

// 给按钮添加点击事件

*('click', function() {

  // 平滑滚动到顶部

    top: 0,

    behavior: 'smooth'

</script>

这段代码的意思就是，当我点击这个按钮的时候，页面就会平滑地滚动到顶部。behavior: 'smooth' 这个属性就是让滚动过程变得平滑的关键，不然页面会“唰”的一下就跳到顶部，那感觉，有点生硬。

测试与完善

代码写完，我赶紧打开博客，亲自体验一把。不错，点击按钮，页面嗖嗖嗖地就回到顶部，流畅得很！而且无论我怎么滚动页面，这个按钮都乖乖地待在右下角，不离不弃。不过我还发现一个小问题，就是页面刚加载的时候，这个按钮就杵在那，有点多余，毕竟那时候页面本来就在顶部嘛我又加几行代码，让按钮在页面滚动到一定程度之后再显示：

<script>

// ... (之前的代码) ...

// 监听滚动事件

*('scroll', function() {

  // 如果滚动距离大于150像素，就显示按钮，否则隐藏

  if (* > 150) {

    * = 'block';

  } else {

    * = 'none';

</script>

这下子，这个“回到顶部”按钮就彻底完工！它既实用又美观，还能根据页面滚动情况自动显示和隐藏，简直完美！

整个过程虽然不复杂，但每一步都是我自己琢磨出来的，这种感觉，咋说，就一个字：爽！以后，谁来我博客看文章，都能享受到这个贴心的小功能。希望我的分享对大家有所帮助，也欢迎大家来我的博客逛逛，体验一下这个“回到顶部”按钮的魅力！