zoukankan      html  css  js  c++  java
  • 返回顶部

    使用jquery返回顶部

    使用锚点返回顶部

    最下面的

    <a id="aa" href="#top" target="_self">返回顶部</a>

    最上面的div
    <div id="top"></div>

    下面是jquery代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./animate.css">
    <!--<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>-->

    <style>
    #top{
    height: 50px;
    background: #00b488;
    }
    .son{
    50px;
    height: 300px;
    background: red;
    border: 1px solid #cccccc;
    margin-bottom: 20px;
    }
    #aa{
    80px;
    height:30px;
    background:black;
    display:block;
    position: fixed;
    bottom: 10px;
    right: 10px;
    color: #FFFFFF;
    }
    </style>
    </head>
    <body>
    <div>
    <div id="top">333</div>
    <div class="son">
    111
    </div>
    <div class="son">
    111
    </div>
    <div class="son">
    111
    </div>
    <div class="son">
    111
    </div>
    <div class="son">
    111
    </div>
    <div class="son">
    111
    </div>
    <div class="son">
    111
    </div>
    <div class="son">
    111
    </div>
    <a id="aa" href="#top" target="_self">返回顶部</a>
    </div>
    <script>
    $(function(){
    $("#aa").click(function() {
    $("html,body").animate({scrollTop:0}, 500);
    });
    })
    </script>
    </body>
    </html>
  • 相关阅读:
    微信小程序 列表渲染 wx:for
    微信小程序获取数据、处理数据、绑定数据关键步骤记录
    jq获取页面距离
    jq中哪个方法有回调函数
    轮播图jq版
    计算器
    计算机基础
    安装LAMP
    ubuntu安装最新版本的node.js
    blade模版之页面的嵌套
  • 原文地址:https://www.cnblogs.com/yuanyuan-1994/p/8612095.html
Copyright © 2011-2022 走看看