创建按钮元素
要让上面那条滑动条更顺手，得先放个按钮。如果你会HTML那就直接上，不会的话随便涂鸦一下也成。记得给它起个个性的名称，这样以后用着省事好多。名字搞定后，不管是CSS还是JavaScript都能轻松操控此按钮。
在HTML文件中可以这样创建一个简单的返回顶部按钮：
html
这儿有个叫”backToTopBtn”的回顶按钮！
添加CSS样式
咱们赶紧动手把按钮打扮得美美的，融入到整个网页中去有木有！只需运用一点点CSS的魔法，你就可以改变按钮的颜值了，比如背景色，边框什么的，甚至连文字大小和字体都随心所欲。还有神奇的是，按钮还能稳稳地呆在浏览器底部！
css
#backToTopBtn {
position: fixed;
bottom: 20px;
right: 20px;
background-color:#007bff;
color:#fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
<pre class='brush:css;toolbar:false;'>#scrollToTopBtn {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #333;
color: #fff;
border: none;
padding: 10px 15px;
font-size: 16px;
cursor: pointer;
}
看这段CSS代码，是不是在电脑右下角发现了一个小小的蓝色按钮呀？快点击看看，它瞬间变成白色，上面的字也换掉了。还有那些小框框和圆边儿，让画面看起来更美观了！
添加滚动动画效果
想让”回到顶部”按钮更炫酷？动手试试加个彩蛋！其实很简单，只要运用CSS里面的transition和transform小妙招，就能快速做出超赞的滑动效果了~
/*其他样式*/
transform: translateY(100%);
动画效果：慢慢转过来，大约0.3秒就搞定了。
#backToTopBtn:hover {
transform: translateY(0);
#scrollToTopBtn {
/* ...其他样式设置... */
transform: translateY(100%);
transition: transform 0.3s ease;
}
#scrollToTopBtn:hover {
transform: translateY(0);
}
来试试这个小程序，一开始那个按钮躲在底下面100像素的地方。鼠标一碰，它就会快速滑到底部去，这就是大家常说的“过度动画”，我们已经调整好速度和效果了
添加JavaScript功能
急啥子？别只关注网页的外观，记得瞅瞅那个“回到顶部”的小按钮。加点小白代码进去，搞定了吗？然后再用window.scrollTo()这个函数，网页就会乖乖地回到底部
javascript
“回到顶部”就在网页上方！直接在document中找到它，换个名字叫’dstopHereBtn’就行了。
点个返回顶部的按钮，就能让你回到顶部了。
window.scrollTo({
top:0,
behavior:’smooth’
var scrollToTopBtn = document.getElementById('scrollToTopBtn');
scrollToTopBtn.addEventListener('click', function() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
});
});
这个小代码可以帮你找到那个叫“backToTopBtn”的文件夹。只要轻轻一点，就能让页面瞬间回到最上面！然后把 behaviouro 设成’smooth’，这样滑动起来就会更加流畅带感了！
结语
简单的说，加个css滑动按钮能让你上网体验更酷！先搞定按钮的样子和动作效果，然后利用JavaScript操控，瞬间就能回到页面顶端~这么一改，网页用起来真的很顺手，看啥都爽歪歪。
看了这个文章，你有啥想法没？或者说，你之前有没有见过差不多这样的设计？那说到那个“回顶部”的按键，你觉得还有哪些地方能让它更好用点？
评论0