使用jQuery实现指定元素内（flex布局）进行滚动并返回顶部功能

迷南。 2024-02-19 12:46 39阅读 0赞

<!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>