<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>回到顶部</title>
    <meta name="viewport" content="width=1200, maximum-scale=1.0, user-scalable=1">
    <style>
        .scrollToTop{
            display: block;
            width: 42px;
            height: 42px;
            position: fixed;
            bottom: 5%;
            right: 2%;
            display: none;
            font-size: 40px;
            background: #232323;
            color: #ebebeb;
            border-radius: 3px;
            text-align: center;
            line-height: 38px;
            z-index: 999;
        }
        .scrollToTop i img{margin:9px 0px 0px 2px;}
    </style>

</head>
<body style="height:2000px">

<a href="#" title="sroll" class="scrollToTop"><i><img src="https://www.cnblogs.com/images/cnblogs_com/wrongcode/1426773/o_uptop0.png" alt=""></i></a>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
        $(window).scroll(function() {
            if ($(this).scrollTop() > 300) {
                $('.scrollToTop').fadeIn();
            } else {
                $('.scrollToTop').fadeOut();
            }
        });

        $('.scrollToTop').on("click", function() {
            $('html, body').animate({
                scrollTop: 0
            }, 800);
            return false;
        });
</script>

</body>
</html>

jquery点击回到顶部的更多相关文章

  1. 点击回到顶部（jQuery）

    写这个点击回到顶部.我采用的是最简单的jQuery,的点击事件  和animate特效. html部分 <div class="pulltop"> <img sr ...

  2. js点击回到顶部2

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>点 ...

  3. js点击回到顶部

    ---恢复内容开始--- <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  4. jQuery写toTop(回到顶部)效果

    在通常的网站开发中,页面有时候会很长,尤其是一些电商网站,为了提高用户的体验效果,我们通常会增加一个回到顶部的按钮,这个按钮我们同城会使用fixed定位,将其定位在当前可视区域某一固定位置.这个效果用 ...

  5. jQuery实现页面回到顶部功能

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  6. jquery点击回到页面顶部方法

    1.代码实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  7. [HTML/JS] JQuery 页面滚动回到顶部

    HTML: <html> <body> <div id="back-to-top" style="cursor:pointer; displ ...

  8. jquery 插件页面回到顶部

    引用: jquery.scrollUp.min.js js: $.scrollUp({ scrollName: 'scrollUp', // Element ID topDistance: '300' ...

  9. js+css实现点击回到顶部的效果（最低兼容至ie7）

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

随机推荐

  1. C#开发微信支付之企业向用户付款

    1.企业付款的介绍 所谓企业付款指的是,在功能开放后诸如保险行业的客户理赔.退保.商品退款.发放征集活动奖金.抽奖互动等操作都可以通过企业付款完成.而此前,微信支付只能提供客户向企业单向付款. 商户如 ...

  2. Linux 常用性能分析命令

    性能分析 vmstat 虚拟内存统计 用法 Usage: vmstat [options] [delay [count]] Options: -a, --active           active ...

  3. windows10下 MySQL5.7.18版本安装过程及遇到的问题

    windows10下 MySQL5.7.18版本安装过程及遇到的问题           mysql-5.7.18-winx64 安装           1.解压 此次将MySQL装在H盘,依个人喜 ...

  4. 在局域网中搭建自己的gis服务器

    在局域网中搭建自己的gis服务器 需求        在客户的B/S应用系统中使用电子地图.该系统只可运行于内部网中. 分析        由于系统中的电子地图只能运行于局域网中所以不能采用googl ...

  5. Koa2

    安装 yarn add koa 代码 Koa的核心代码就三行 const app = new Koa() app.use(middleware) app.listen(3000) const Koa ...

  6. 对map集合按照value从大到小进行排序

    概述: 基本特点: 该集合存储键值对,而且要保证键的惟一性 子类: |--HashTable 底层是哈希数据表结构,不可以使用Null作为键或者值:该集合线程是同步的 |--hashMap   底层是 ...

  7. jQuery获取各种位置方法

    一.获取窗口的宽高 1.获取流览器显示区域的高度 : $(window).height(); 2.获取流览器显示区域的宽度 : $(window).width(); 3.获取文档流的高度 : $(do ...

  8. nodejs版 阿里云开放api签名算法

    阿里云 API 签名 github:https://github.com/liuyinglong/aliyun; npm :https://www.npmjs.com/package/aliyun-a ...

  9. 执行Runtime.exec()需要注意的陷阱

    作为Java语言的一部分.java.lang包被隐藏的导入到每一个Java程序.这个包的表面陷阱,经常影响到大多数程序员.这个月,我将讨论运行时exec()方法时的潜伏陷阱. 陷阱4:当运行exec( ...

  10. 我的coding地址

    https://dev.tencent.com/u/dtid_d6b0780bdefc3f9c/follower#1