使用jQuery實現指定元素內（flex佈局）進行滾動並返回頂部功能
阿新 • • 發佈：2018-11-10
<!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>