<!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. element-ui-verify使用

    element-ui-verify是对ElementUI原本的校验封装之后的插件,并不会影响使用ElementUI的原生校验. 使用环境为vue+element-ui+webpack模块环境,首先使用 ...

  2. 【Python爬虫】01：网络爬虫--规则

    Python网络爬虫与信息提取 目标:掌握定向网络数据爬取和网页解析的基本能力. the website is the API 课程分为以下部分: 1.requsets库(自动爬取HTML页面.自动网 ...

  3. MyPubMedID

    MyPubMedID是北京同舟云信息技术公司全新开发的新一代生物医学文献检索与分析平台. 该平台对PubMed全部内容进行重新清洗.组织.挖掘和开发,在完全消除PubMed检索歧义的同时,能够保证检索 ...

  4. 6.2 集合和映射--集合Set->底层基于链表实现

    在6.1中我们实现了底层基于二叉搜索树的集合,本节就底层如何基于链表实现进行学习,注意:此处的链表是之前自己封装的. 1.集合set相关功能 1.1 add()的不同 用于链表本身没有去重的效果,因此 ...

  5. 5. Failed to configure a DataSource: 'url' attribute is not specified and no embedded datasource could be configured.

    解决方案,见  https://www.jianshu.com/p/836d455663da

  6. java面试题复习（六）

    51.实现多线程的方法 一种是继承Thread类:另一种是实现Runnable接口.两种方式都要通过重写run()方法来定义线程的行为,推荐使用后者,因为Java中的继承是单继承,一个类有一个父类,如 ...

  7. Django 中的JsonResponse 和 json区别

    from django.http import JsonResponse JsonResponse 里面代码会加这一个响应头 kwargs.setdefault('content_type', 'ap ...

  8. 500G ！！史上最全的JAVA全套教学视频网盘分享 (JEECG开源社区)

    500 G JAVA视频网盘分享(JEECG开源社区) [涵盖从java入门到深入架构,Linux.云计算.分布式.大数据Hadoop.ios.Android.互联网技术应有尽有] JEECG开源社区 ...

  9. win10以管理员身份运行cmd方法

    win10以管理员身份运行cmd方法 win8win10以管理员身份运行cmd方法1.直接到 C:\Windows\System32 下面找cmd.exe 右键以管理员方式打开就可以了 2.按WIN+ ...

  10. activiti官网实例项目activiti-explorer之获取流程节点

    如上图在保存步骤中添加获取节点信息方法nodes(); 方法如下: //获取所有节点    JsonNode modelNode = new ObjectMapper().readTree(repos ...