当前位置: 首页 > article >正文

CSS实现回到顶部且平滑过渡

背景

最近同学在项目开发的时候问了我一个问题:小白,回到顶部该怎么做呀?我当时就愣住了,心想这不是很基础的一个功能吗,然后想到该同学没有系统学过网页三剑客,我就给他讲了该怎么实现这个虽然基础但在很多项目中都很实用的功能。

不过我还是笑了,为啥,因为我不允许还有人不会这个听起来貌似高大上的回到顶部,所以我选择更一篇。(大佬绕道 /plea手)

基本介绍

本文仅介绍回到顶部功能的CSS做法(毕竟这么简单没有特别的需求都能用)

后续或许会出涉及JS的用法

什么是回到顶部按钮?

回到顶部按钮是一个浮动在页面右下角的小图标,用户点击后可以立即返回到页面的顶部。这种设计可以有效地提高网站的可用性,尤其是在移动设备上,用户只需轻轻一按就能回到开始阅读的位置。

代码实现

以下是实现回到顶部效果的 HTML 和 CSS 代码示例,功能以外的样式从简处理。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>back-to-top-demo</title>
    <style>
        /* 通配 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        /* 滚动条样式 */
        /* 定义滚动条宽度和背景颜色 */
        ::-webkit-scrollbar {
            width: 8px;
            background-color: #F5F5F5;
        }

        /* 定义滚动条轨道的阴影和圆角 */
        ::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
            border-radius: 10px;
            background-color: #F5F5F5;
        }

        /* 定义滑块的圆角和阴影 */
        ::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
            background-color: #555;
        }
        html,
        body {
            /* height: 100%; */
            /* width: 100%; */
            background-color: rgba(153, 153, 255, .3);
            /* 平滑过渡效果 */
            scroll-behavior: smooth;
        }

        /* scoped样式 */
        #title {
            text-align: center;
            font-weight: 900;
            font-family: '宋体';
            padding: 10px;
        }

        #to_top_ball {
            display: block;
            text-align: center;
            line-height: 60px;
            /* display: flex;
            justify-content: center;
            align-items: center; */
            width: 60px;
            height: 60px;
            font-size: 50px;
            background-color: rgb(153, 204, 255);
            border-radius: 50%;
            text-decoration: none;
            color: rgb(255, 255, 255);
            box-shadow: 0 0 20px 0 rgba(0, 0, 255, .5);
            position: fixed;
            bottom: 20px;
            right: 20px;
            /* opacity: .6; */
            transition: all .6s;
        }

        #to_top_ball:hover {
            background-color: rgb(255, 102, 102);
            box-shadow: 0 0 30px 0 rgba(255, 0, 0, .8);
            transform: translate(0, -10px);
        }
    </style>
</head>

<body>
    <div id="index">
        <h1 id="title">我是标题</h1>
        <div id="content">
            <p id="a">我是内容</p>
            <p>我是内容</p>
            <p>我是内容</p>
            <p>我是内容</p>
            /* p{我是内容}*100;需要自己添加足够多能出现滚动条的内容 */
        </div>
        <a href="#index" id="to_top_ball"></a>
    </div>
</body>

</html>

重点代码

平滑过渡

很多人会嫌CSS做的回到顶部太过于生涩,点一下它就直接跳到目标锚点了,然后纷纷选择使用JS,但事实的确如此吗?CSS真的做不了平滑过渡的拉动效果吗?当然不! 一行CSS样式设置让你对它刮目相看。

html,
body {
    /* ...other codes... */
    scroll-behavior: smooth;/* 平滑过渡效果 */
}

#to_top_ball

#to_top_ball {
	/* 球内内容水平垂直居中法一 */
    display: block;
    text-align: center;
    line-height: 60px;
    /* 球内内容水平垂直居中法二 */
    /* display: flex;
    justify-content: center;
    align-items: center; */
    width: 60px;
    height: 60px;
    /* 控制箭头大小 */
    font-size: 50px;
    background-color: rgb(153, 204, 255);
    border-radius: 50%;
    text-decoration: none;
    color: rgb(255, 255, 255);
    /* 呈现立体效果 */
    box-shadow: 0 0 20px 0 rgba(0, 0, 255, .5);
    /* 固定定位,相对窗口 */
    position: fixed;
    bottom: 20px;
    right: 20px;
    /* 过渡效果,球hover后不生涩 */
    transition: all .6s;
}
/* 球hover后的效果 */
#to_top_ball:hover {
    background-color: rgb(255, 102, 102);
    box-shadow: 0 0 30px 0 rgba(255, 0, 0, .8);
    transform: translate(0, -10px);
}

#to_top_ball的内容控制

#to_top_ball {
	/* 球内内容水平垂直居中法一 */
    display: block;
    text-align: center;
    line-height: 60px;
    /* 球内内容水平垂直居中法二 */
    /* display: flex;
    justify-content: center;
    align-items: center; */
    /* ...other codes... */
}

主要知识点

主要利用了a标签的href属性与其他标签的id属性进行配合

Q&A


Q:a标签的href属性与其他标签的class属性进行配合可以吗?
A:当然肯定必须不行呀,举个例子,你喝完孟婆汤之后被带到了一个分叉路口,前面四五个指示牌都是罗马,这你怎么走,一不小心选错就变牛马…


Q:a标签href属性的值我可以写#top吗?
A:当然肯定必须可以呀,只要想达到的效果是回到当前页面顶部就行,自己写带id的元素只是可以更灵活控制scroll到的位置。

总结

等一个课代表评论区总结,笑。


http://www.kler.cn/a/373093.html

相关文章:

  • 《IDEA 使用技巧分享》
  • docker-minio启动参数
  • 瑞芯微RK3566/RK3568 Android11下该如何默认屏蔽导航栏/状态栏?看这篇文章就懂了
  • Linux系统编程——信号量
  • 关于深度学习方向学习的一些建议
  • 复现第一周24
  • Zoho x Zendure:借助Zoho One加速从0到1出海品牌搭建
  • 【速查笔记】单片机
  • 让卷积神经网络来辨识马和人
  • 【折腾一上午】Java POI 导出 Excel 自适应列宽行高
  • STM32FreeRTOS 使用QSPI驱动nandFlash
  • Sentinel底层如何计算京东双十一线上系统实时QPS
  • 【SAP FICO】八大业务_6货币资金管理
  • 挑战Java面试题复习第3天,无人扶我青云志
  • ELK Stack与Graylog:强大的日志分析和可视化工具
  • 分类算法——LightGBM 详解
  • 基于SSM+微信小程序的汽车维修管理系统(汽车5)
  • 使用Python批量合并多个PDF文档
  • 使用 Flask 实现简单的登录注册功能
  • Unity计算二维向量夹角余弦值和正弦值的优化方法参考
  • cmake学习笔记
  • 什么是目标检测?
  • P1037 [NOIP2002 普及组] 产生数
  • Mybatis-18.动态SQL-sqlinclude
  • 【从零开始的LeetCode-算法】3216. 交换后字典序最小的字符串
  • MaskGCT,零样本语音克隆,TTS语音合成,多语言支持(WIN/MAC)