#纯CSS实现#网页返回顶部按钮设计【演示/源码】
作者:admin 时间:2022-8-13 9:23:13 浏览:本文介绍一个返回顶部的按钮设计，它是用纯CSS实现的，无需用到JavaScript。
实例介绍
当屏幕内容往上滚出屏幕时，右下角就出现一个按钮，点击该按钮，网页滚到顶部。
该实例的特点是无需用到JavaScript，而是纯CSS实现的。
完整HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body {
display: grid;
grid-template-columns: 1fr 0px;
font-family: system-ui, sans-serif;
background: #eee;
}
.top {
--offset: 100px;
position: sticky;
bottom: 20px;
margin-right: 10px;
place-self: end;
margin-top: calc(100vh + var(--offset));
width: 60px;
aspect-ratio: 1;
background: #ff8b24;
border-radius: 10px;
font-size: 0;
}
.top:before {
content: "";
position: absolute;
inset: 30%;
transform: translateY(20%) rotate(-45deg);
border-top: 5px solid #fff;
border-right: 5px solid #fff;
}
h1 {
font-size: 3rem;
}
p {
font-size: 1.5rem;
text-align:justify;
}
body > div {
margin-inline: max(3px,50% - 800px/2);
}
html,
body {
scroll-behavior: smooth;
}
</style>
</head>
<body translate="no" >
<div>
<h1>卡卡网</h1>
<h2 >卡卡网简介</h2>
<p>卡卡网建立于2009年4月，是非盈利性网站，没有任何收费项目，所有广告收入全部用于支付服务器和网站的日常开销。本站旨在为广大网站建设人员提供专业的网站测速和优化服务，以及为广大网民提供网络速度测试服务。本站提供的在线测速服务是完全免费的，无须注册便可使用。</p>
<p>卡卡网是国内站长和IDC商检测网络线路和网站测速的第三方工具之一，每天为超过1万的网站提供测速服务，专业、专心、专注，为卡卡网赢得了良好的口碑和业界的肯定。</p>
<h2 >卡卡网简介</h2>
<p>卡卡网建立于2009年4月，是非盈利性网站，没有任何收费项目，所有广告收入全部用于支付服务器和网站的日常开销。本站旨在为广大网站建设人员提供专业的网站测速和优化服务，以及为广大网民提供网络速度测试服务。本站提供的在线测速服务是完全免费的，无须注册便可使用。</p>
<p>卡卡网是国内站长和IDC商检测网络线路和网站测速的第三方工具之一，每天为超过1万的网站提供测速服务，专业、专心、专注，为卡卡网赢得了良好的口碑和业界的肯定。</p>
<h2>卡卡网简介</h2>
<p>卡卡网建立于2009年4月，是非盈利性网站，没有任何收费项目，所有广告收入全部用于支付服务器和网站的日常开销。本站旨在为广大网站建设人员提供专业的网站测速和优化服务，以及为广大网民提供网络速度测试服务。本站提供的在线测速服务是完全免费的，无须注册便可使用。</p>
<p>卡卡网是国内站长和IDC商检测网络线路和网站测速的第三方工具之一，每天为超过1万的网站提供测速服务，专业、专心、专注，为卡卡网赢得了良好的口碑和业界的肯定。</p>
</div>
<a href="#" class="top">返回顶部</a>
</body>
</html>
代码分析
.top {
--offset: 100px;
...
}--offset 是控制按钮出现的变量，100px 表示当网页向上滚动100px时，出现按钮。
body {
scroll-behavior: smooth;
}scroll-behavior: smooth; 表示点击按钮时网页是滚动到顶部，如果把该CSS语句去掉，则是跳到顶部。
总结
本文介绍了一个返回顶部的按钮设计，它是用纯CSS实现的，无需用到JavaScript，推荐使用，值得收藏。
相关文章
相关文章
x
- 站长推荐
