陕西建设机械官方网站,平江网站设计多少钱,在信息发布网站建设外链,长春网站优化实战背景 最近同学在项目开发的时候问了我一个问题#xff1a;小白#xff0c;回到顶部该怎么做呀#xff1f;我当时就愣住了#xff0c;心想这不是很基础的一个功能吗#xff0c;然后想到该同学没有系统学过网页三剑客#xff0c;我就给他讲了该怎么实现这个虽然基础但在很多…背景 最近同学在项目开发的时候问了我一个问题小白回到顶部该怎么做呀我当时就愣住了心想这不是很基础的一个功能吗然后想到该同学没有系统学过网页三剑客我就给他讲了该怎么实现这个虽然基础但在很多项目中都很实用的功能。 不过我还是笑了为啥因为我不允许还有人不会这个听起来貌似高大上的回到顶部所以我选择更一篇。大佬绕道 /plea手 基本介绍
本文仅介绍回到顶部功能的CSS做法毕竟这么简单没有特别的需求都能用 。 后续或许会出涉及JS的用法 什么是回到顶部按钮
回到顶部按钮是一个浮动在页面右下角的小图标用户点击后可以立即返回到页面的顶部。这种设计可以有效地提高网站的可用性尤其是在移动设备上用户只需轻轻一按就能回到开始阅读的位置。
代码实现
以下是实现回到顶部效果的 HTML 和 CSS 代码示例功能以外的样式从简处理。
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleback-to-top-demo/titlestyle/* 通配 */* {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
/headbodydiv idindexh1 idtitle我是标题/h1div idcontentp ida我是内容/pp我是内容/pp我是内容/pp我是内容/p/* p{我是内容}*100需要自己添加足够多能出现滚动条的内容 *//diva href#index idto_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属性进行配合
QA Ⅰ Qa标签的href属性与其他标签的class属性进行配合可以吗 A当然肯定必须不行呀举个例子你喝完孟婆汤之后被带到了一个分叉路口前面四五个指示牌都是罗马这你怎么走一不小心选错就变牛马… Ⅱ Qa标签href属性的值我可以写#top吗 A当然肯定必须可以呀只要想达到的效果是回到当前页面顶部就行自己写带id的元素只是可以更灵活控制scroll到的位置。 总结
等一个课代表评论区总结笑。
