<!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. n2n网络穿透内网

    目录 前言 配置 网络拓扑: 公网服务器的配置 公司电脑的配置 家里笔记本的配置 注意事项 使用n2n网络 n2n的各edge之间传输数据 补充:NAT类型 后记 前言 在家里的时候比较经常需要对公司 ...

  2. gunicorn开启、关闭和重启

    1.gunicorn开启 在项目的根目录下,输入下方的代码. gunicorn --bind unix:/tmp/域名.socket projectname.wsgi:application 2.查询 ...

  3. win10、Ubuntu14.04双系统正确卸载Ubuntu的方法

    参考博客:http://www.cnblogs.com/xia-Autumn/p/6294055.html 问题描述:由于python问题Ubuntu系统崩了,登录之后无法进入桌面.重装桌面时报错,无 ...

  4. jersey 开启gzip

    @Bean public ResourceConfig resourceConfig() { ResourceConfig resourceConfig = new ResourceConfig(); ...

  5. python configparse模块&xml模块

    configparse模块 用于生成和修改常见配置文档,当前模块的名称在 python 3.x 版本中变更为 configparser. [DEFAULT] serveraliveinterval = ...

  6. hml页面转化成图片

    <!DOCTYPE html><html><head><meta charset="utf-8"><meta name=&qu ...

  7. vChart

    vue+echarts工具:    https://v-charts.js.org

  8. CAtia_打开提示：许可证过期怎么办

    CAtia_许可证过期怎么办:进计算机管理,点开服务和应用程序,点服务,找到DS License Server,在启动此服务的地方点启动,从而开启DS License Server.

  9. DEPLOY YOUR WEBSITE TO GITHUB PAGES

    DEPLOY YOUR WEBSITE TO GITHUB PAGES Review Fantastic! You now have your site published on the public ...

  10. 面试常问MySQL性能优化问题

    知识综述: [1] MySQL中锁的种类: 常见的表锁和行锁,也有Metadata Lock等等,表锁是对一整张表加锁,分为读锁和写锁,因为是锁住整张表,所以会导致并发能力下降,一般是做ddl处理时使 ...