需求
- 返回顶部时有滚动效果
- 鼠标悬停时有交互效果
- 默认隐藏返回顶部按钮
- 按钮固定在屏幕右下方
实现
HTML
<span id="go-to-top">
<i class="fa fa-chevron-up"></i>
</span>
CSS
#go-to-top {
/* 固定在屏幕右下角 */
position: fixed;
right: 35px;
bottom: 60px;
/* 默认隐藏 */
display: none;
/* 盒模型 */
width: 40px;
height: 40px;
line-height: 40px;
cursor: pointer;
/* 文字 */
text-align: center;
color: #fff;
/* 可以换成图片背景 */
background-color: #ccc;
transition: background-color 0.4s;
}
#go-to-top:hover {
background-color: #999;
}
JavaScript
/**
* 返回顶部
*/
// 返回顶部
function getScrollTop() {
return document.documentElement.scrollTop + document.body.scrollTop;
}
function setScrollTop(value)
{
if (document.documentElement.scrollTop)
{
document.documentElement.scrollTop = value;
}
else
{
document.body.scrollTop = value;
}
}
// 弹性返回顶部，展现滚动的动画
var goToTop = $('#go-to-top');
goToTop.click(function(event) {
var goTop = setInterval(scrollMove, 12);
function scrollMove()
{
setScrollTop(getScrollTop() / 1.1);
if (getScrollTop() < 1) clearInterval(goTop);
}
});
// 自动隐藏放回顶部按钮
$(window).scroll(function(event) {
getScrollTop()>0 ? goToTop.fadeIn('fast') : goToTop.fadeOut('fast');
});
解决方案
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>弹性放回顶部</title>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style>
#go-to-top {
/* 固定在屏幕右下角 */
position: fixed;
right: 35px;
bottom: 60px;
/* 默认隐藏 */
display: none;
/* 盒模型 */
width: 40px;
height: 40px;
line-height: 40px;
cursor: pointer;
/* 文字 */
text-align: center;
color: #fff;
/* 可以换成图片背景 */
background-color: #ccc;
transition: background-color 0.4s;
}
#go-to-top:hover {
/* 鼠标悬停的交互 */
background-color: #999;
}
</style>
</head>
<body>
<!-- 一堆占位div -->
<div style="width: 100%; height: 400px; background-color: red"></div>
<div style="width: 100%; height: 400px; background-color: green"></div>
<div style="width: 100%; height: 400px; background-color: blue"></div>
<div style="width: 100%; height: 400px; background-color: yellow"></div>
<div style="width: 100%; height: 400px; background-color: black"></div>
<div style="width: 100%; height: 400px; background-color: orange"></div>
<div style="width: 100%; height: 400px; background-color: white"></div>
<div style="width: 100%; height: 400px; background-color: pink"></div>
<!-- 返回顶部组件 -->
<span id="go-to-top">
<i class="fa fa-chevron-up"></i>
</span>
<!-- 脚本 -->
<script src="http://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
<script>
/**
* 返回顶部
*/
// 返回顶部
function getScrollTop() {
return document.documentElement.scrollTop + document.body.scrollTop;
}
function setScrollTop(value)
{
if (document.documentElement.scrollTop)
{
document.documentElement.scrollTop = value;
}
else
{
document.body.scrollTop = value;
}
}
// 弹性返回顶部，展现滚动的动画
var goToTop = $('#go-to-top');
goToTop.click(function(event) {
var goTop = setInterval(scrollMove, 12);
function scrollMove()
{
setScrollTop(getScrollTop() / 1.1);
if (getScrollTop() < 1) clearInterval(goTop);
}
});
// 自动隐藏放回顶部按钮
$(window).scroll(function(event) {
getScrollTop()>0 ? goToTop.fadeIn('fast') : goToTop.fadeOut('fast');
});
</script>
</body>
</html>
