大家介绍如何通过 JS/CSS 实现网页返回顶部效果。
CSS 按钮样式:
#myBtn {
display: none; /* 默认隐藏 */
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
border: none;
outline: none;
background-color: red; /* 设置背景颜色,你可以设置自己想要的颜色或图片 */
color: white; /* 文本颜色 */
cursor: pointer;
padding: 15px;
border-radius: 10px; /* 圆角 */
}
var topBtn = document.getElementById('top');
// 获取视窗高度
var winHeight = document.documentElement.clientHeight;
window.onscroll = function () {
// 获取页面向上滚动距离,chrome浏览器识别document.body.scrollTop,而火狐识别document.documentElement.scrollTop,这里做了兼容处理
var toTop = document.documentElement.scrollTop || document.body.scrollTop;
// 如果滚动超过一屏,返回顶部按钮出现,反之隐藏
if(toTop>=winHeight){
topBtn.style.display = 'block';
}else {
topBtn.style.display = 'none';
}
}
topBtn.onclick=function () {
var timer = setInterval(function () {
var toTop = document.documentElement.scrollTop || document.body.scrollTop;
// 判断是否到达顶部,到达顶部停止滚动,没到达顶部继续滚动
if(toTop == 0){
clearInterval(timer);
}else {
// 设置滚动速度
var speed = Math.ceil(toTop/5);
// 页面向上滚动
document.documentElement.scrollTop=document.body.scrollTop=toTop-speed;
}
},50);
}
现回到顶部按钮 Back To Top的效果图
回到顶部按钮,常用与PC站点中。
例如用户查看完长篇文章,可以点击按钮快速回到顶部,继续浏览其他的内容。
提供回到顶部按钮的功能,是一种很好的用户体验。
<a href="#" class="back-to-top">︽</a>
优点是实现简单非常直接,通过HTML就可实现,无需用到Javascript。
缺点是点击就立即返回是回到顶部,比较单调,缺少动画效果。
还有一个潜在缺点是回到头部后,URL上的锚点会变成空,如果网站用到锚点功能,例如tab标签,就会互相影响。
<button class="js-back-to-top back-to-top">︽</button>
主要的做法有两步
当用户滚动到离顶部100像素时,展示回到顶部按钮
当用户点击按钮时,通过动画效果返回头部
实现回到顶部按钮 Back To Top的Javascript代码
这种方法的优点是逻辑简单,一目了然,回到顶部能够自定义动画效果,让用户感觉操作顺畅。
要说缺点就是比第一种复杂点,需要Javascript配合。
最后附上第二种方法的HTML + CSS + Javascript源码,大家可以复制后保存为html文件,双击打开即可体验。
大家如果有更好的办法,或者优化的地方,也可以和小编分享下!
<html>
<head>
<meta charset="utf-8">
<style>
.back-to-top {
display: none; /* 默认是隐藏的,这样在第一屏才不显示 */
position: fixed; /* 位置是固定的 */
bottom: 20px; /* 显示在页面底部 */
right: 30px; /* 显示在页面的右边 */
z-index: 99; /* 确保不被其他功能覆盖 */
border: 1px solid #5cb85c; /* 显示边框 */
outline: none; /* 不显示外框 */
background-color: #fff; /* 设置背景背景颜色 */
color: #5cb85c; /* 设置文本颜色 */
cursor: pointer; /* 鼠标移到按钮上显示手型 */
padding: 10px 15px 15px 15px; /* 增加一些内边距 */
border-radius: 10px; /* 增加圆角 */
}
.back-to-top:hover {
background-color: #5cb85c; /* 鼠标移上去时,反转颜色 */
color: #fff;
}
</style>
</head>
<body>
<div style="background-color:#5cb85c;color:white;padding:20px">固定到底部</div>
<div style="background-color:#f6f6f6;padding:20px 20px 1000px">
该实例演示了如何创建一个“回到顶部”按钮。请往下滚动,体验效果。</div>
<button class="js-back-to-top back-to-top" title="回到头部">︽</button>
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<script>
$(function () {
var $win = $(window);
var $backToTop = $('.js-back-to-top');
// 当用户滚动到离顶部100像素时,展示回到顶部按钮
$win.scroll(function () {
if ($win.scrollTop() > 100) {
$backToTop.show();
} else {
$backToTop.hide();
}
});
// 当用户点击按钮时,通过动画效果返回头部
$backToTop.click(function () {
$('html, body').animate({scrollTop: 0}, 200);
});
});
</script>
</body>
</html>
最最后是蜜蜂小提示时间,让您了解更多。
蜜蜂小提示
Javascript操作的类名,使用“js-”开头,可以和CSS类区分开来,使逻辑更清晰,修改时也不用担心改错了。
*请认真填写需求信息,我们会在24小时内与您取得联系。