版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/xiaoxiong_jiaxin/article/details/83544930
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8"/>
<title ng-bind="title">使用jQuery实现指定元素内(flex布局)进行滚动并返回顶部功能</title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<style>
body,html{height:100%}
footer,header{flex:1}
header.navbar-top{text-align: center;height:30px!important;min-height:40px;background:#205081;color:#fff;font-size:14px!important;line-height:40px;z-index:9999}
header.navbar-top a{color: #fff;}
.example{display:flex;flex-direction:column;height:100%;overflow:hidden}
.navbar-fixed-bottom,.navbar-fixed-top{position:inherit}
.example-body{display:flex}
.content{flex:1;display:flex;padding:20px 30px 20px 30px;flex-direction:column}
.sidebar{width:250px;order:-1;background-color:#fff;box-shadow:1px 4px 10px 0 rgba(0,0,0,.1);overflow-y:scroll}
.content-nav{height:30px;border:1px solid #ddd;line-height:30px}
.content-bottom{display:flex;flex:1}
.content-nav3{width:200px;border:1px solid #ddd;overflow-y:scroll}
.main-content{flex:1;overflow-y:scroll;border:1px solid #ddd;height:calc(100vh - 80px)}
.margin-lg{margin:250px 0}
.fixed-tools{position:fixed;right:40px;bottom:100px;z-index:1000;text-align:center}
.fixed-tools i{margin:0!important;font-size:22px;line-height:1}
.fixed-tools li.item{margin-bottom:10px!important}
.fixed-tools li a{padding:13px 12px!important;width:46px;height:46px;border-radius:50%!important;background:#f1f1f1}
.fixed-tools li a:hover{background-color:#7cc923!important;color:#fff!important}
.fixed-tools li a:hover i{color:#fff!important}
.hover-fixed{position:absolute;top:0;right:100%;display:none;width:150px;height:100%;background-color:#7cc923;color:#fff}
.hover-gototop{position:absolute;right:0;bottom:-46px;display:none;background:#f1f1f1}
</style>
<script>
// var _self = document.getElementById("sidebar");//滚动一级导航显示返回顶部
var _self = document.getElementById("mainContent");//滚动内容区显示返回顶部
_self.addEventListener('scroll', function() {
var t = _self.scrollTop;
if (t > 300) {
$(".hover-gototop").fadeIn(100);
} else {
$(".hover-gototop").fadeOut(100);
}
});
// 点击返回顶部,也可返回指定位置
$(".hover-gototop").on('click', function() {
// $("#sidebar").animate({scrollTop: 200}, 500); //返回一级导航区域距离顶部200px处
$(".main-content").animate({scrollTop:0}, 500); //返回一级内容区距离顶部0px处
})
</script>
</head>
<body>
<section class="example">
<header class="navbar-top navbar-fixed-top">
<a href="#">jq-返回顶部功能</a>
</header>
<div class="example-body">
<aside class="sidebar" id="sidebar">
<ul class="al-sidebar-list">
<li class="al-sidebar-list-item margin-lg">一级导航</li>
<li class="al-sidebar-list-item margin-lg">一级导航</li>
<li class="al-sidebar-list-item margin-lg">一级导航</li>
<li class="al-sidebar-list-item margin-lg">一级导航</li>
<li class="al-sidebar-list-item margin-lg">一级导航</li>
</ul>
</aside>
<main class="content">
<div class="content-nav">
<span>二级导航</span><span>二级导航</span><span>二级导航</span><span>二级导航</span><span>二级导航</span>
<span>二级导航</span><span>二级导航</span><span>二级导航</span><span>二级导航</span><span>二级导航</span>
</div>
<div class="content-bottom">
<div class="content-nav3">
<div class="margin-lg">三级导航</div>
<div class="margin-lg">三级导航</div>
<div class="margin-lg">三级导航</div>
<div class="margin-lg">三级导航</div>
<div class="margin-lg">三级导航</div>
</div>
<div class="main-content" id="mainContent">
<div class="margin-lg">滚动内容区会出现返回顶部按钮</div>
<div class="margin-lg">滚动内容区会出现返回顶部按钮</div>
<div class="margin-lg">滚动内容区会出现返回顶部按钮</div>
<div class="margin-lg">滚动内容区会出现返回顶部按钮</div>
<div class="margin-lg">滚动内容区会出现返回顶部按钮</div>
<div class="margin-lg">滚动内容区会出现返回顶部按钮</div>
<div class="margin-lg">滚动内容区会出现返回顶部按钮</div>
<div class="margin-lg">滚动内容区会出现返回顶部按钮</div>
</div>
</div>
</main>
</div>
</section>
<ul class="nav fixed-tools">
<li class="item">
<a class="text-muted" title="联系方式">Tel</a>
<div class="hover-fixed text-center">
<small>023-86*******</small>
<br>
<small>023-86*******</small>
</div>
</li>
<li>
<div>
<a class="hover-gototop" title="返回顶部">↑</a>
</div>
</li>
</ul>
</body>
</html>