脚本之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > CSS > CSS教程 > css平滑过渡到顶部

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

  发布时间：2024-10-28 14:53:46   作者：不做超级小白   我要评论
本文主要介绍了在网页开发中如何实现“回到顶部”的功能,通过HTML和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到的位置。

总结

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

到此这篇关于CSS实现回到顶部且平滑过渡的文章就介绍到这了,更多相关css平滑过渡到顶部内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

相关文章

  • CSS+HTML 实现顶部导航栏功能

    这篇文章主要介绍了CSS+HTML 实现顶部导航栏功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-08-24

  • css之粘性sticky布局实现题头定位在顶部的方法

    这篇文章主要介绍了css之粘性sticky布局实现题头定位在顶部的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着
    2021-02-04

  • css锚点定位被顶部固定导航栏遮住的解决方案

    这篇文章主要介绍了css锚点定位被顶部固定导航栏遮住的解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小
    2020-04-09

  • CSS 返回顶部代码示例

    这篇文章主要介绍了CSS 返回顶部代码示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-03-11

  • 纯CSS实现微信小程序仿QQ顶部提示弹框动画效果

    这篇文章主要介绍了纯CSS实现微信小程序仿QQ顶部提示弹框动画效果,需要的朋友可以参考下
    2018-09-10

  • css返回顶部图标固定在浏览器右下角且兼容ie6

    返回顶部图标固定在浏览器的右下角的相关文章可以在网上找到很多，但是同时兼容ie6的就不多了，本例为大家介绍的这段css样式代码就是可以兼容ie6的，感兴趣的朋友可以参考
    2013-10-20

  • css 固定顶部 怎么用css定义一个固定在页面顶部的层

    这是关于实现css固定div层在页面顶部,css固定div层在页面底部的代码，兼容IE6，有时需要把一个元素固定在页面的某个部位，本文将详细介绍，需要了解的朋友可以参考下
    2012-12-07

最新评论

关注微信公众号

扫一扫