<!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. Springboot jar包外指定配置文件及原理

    解决方案: 修改maven的pom.xml文件 不拷贝资源文件 <resources> <resource> <directory>src/main/resourc ...

  2. bootstrap 常用class

    导航中的折叠菜单 collapse 手机端折叠 navbar-collapse 电脑端展开 navbar-inverse 反色 navbar-default 默认的nav风格 sr-only 专门给屏 ...

  3. 从javascript 调用angular的函数

    从vanilla javascript 调用angular的函数: * 调用 service中的函数var yourService = angular.element(document.body).i ...

  4. C语言博客作业5--指针

    C语言博客作业5--指针 1.本章学习总结(2分) 1.1思维导图 请以思维导图总结本周的学习内容,如下图所示: 1.2本章学习体会及代码量学习体会 1.2.1学习体会 描述本周学习感受,也可以在这里 ...

  5. N个工作日后的日期

    这里对特殊日期采用了模拟的方式,在实际开发中当然这些数据是从数据库中读取,调用方法时 只需传入开始时间(一般当前) 和N(代表N个工作日) /// <summary> /// 获取时间 / ...

  6. （Python基础）集合操作

    集合是一个无序的,不重复的数据组合,它的主要作用如下: 去重,把一个列表变成集合,就自动去重了 关系测试,测试两组数据之前的交集.差集.并集等关系 以下代码演示了去重,增删改查,以及关系测试供参考学习 ...

  7. Cache-control使用Cache-control:private学习笔记【转载】

    网页缓存由 HTTP消息头中的Cache-control控制,常见取值有private.no-cache.max-age.must- revalidate等,默认为private 其作用根据不同的重新 ...

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

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

  9. 关于No qualifying bean of type [XXX.XXX] found for dependency 的一次记录

    异常开始于spring+springmvc+mybatis 注解配置,启动tomcat服务器出现No qualifying bean of type [com.***.service] found f ...

  10. 海外aws-ubuntu-16.04系统使用ansible安装tidb

    本以为按照官方文档会比较顺利,没想到还是遇到了几个坑,毕竟pingcap不能考虑到所有问题 环境: 1.ubuntu:16.04LTS 2.python:2.7 小坑:因为第一次使用ubuntu,没想 ...