<!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. Python课程第二天作业

     一.统计字符串格式 要求: # 1.统计元组中所有数据属于字符串的个数,提示: isinstance() # 数据: t1 = (1, 2, '3', '4', 5, '6') # 结果: 3 代码 ...

  2. java+Selenium+TestNg搭建自动化测试架构(3)实现POM（page+Object+modal）

    1.Page Object是Selenium自动化测试项目开发实践的最佳设计模式之一,通过对界面元素的封装减少冗余代码,同时在后期维护中,若元素定位发生变化,只需要调整页面元素封装的代码,提高测试用例 ...

  3. 【Nginx】实现负载均衡

    负载均衡是什么? 当一台服务器的单位时间内的访问量越大时,服务器压力就越大,大到超过自身承受能力时,服务器就会崩溃.为了避免服务器崩溃,让用户有更好的体验,我们通过负载均衡的方式来分担服务器压力. 我 ...

  4. AET PN结

    电场方向 电场方向和正电荷受力方向相同 飘移运动和扩散运动 多子和电场方向互相抵制,而多子是扩散运动,而对少子则是促进作用,当扩散和漂移达到动态平衡时,我们称PN结形成 PN结特性 单项导电性

  5. Spring MVC参数封装传递

    在Spring MVC中,前端JSP页面可以传递  基本类型(int,String).实体类型.包装类型.数组类型.集合类型(List.map )等. 假如在传递的类型中有 Date类型的字段,需要在 ...

  6. mosquitto broker 安装服务后启动失败

    一.失败原因 由于做项目用到Mqtt协议,需要安装mosquitto broker 服务,在自己本地笔记本电脑安装后直接启动服务是可以的.后来部署到服务器启动,报错缺少msvcr100.dll ,由于 ...

  7. 从 注解和继承 到 JAXB中的注意事项

    从 注解和继承 到 JAXB中的注意事项 注解在继承中的行为 如果一个父类添加了一个注解,子类是否能取到这个注解呢?如下 package inheritance; import java.lang.a ...

  8. 一条SQL语句执行得很慢的原因有哪些？

    说实话,这个问题可以涉及到 MySQL 的很多核心知识,可以扯出一大堆,就像要考你计算机网络的知识时,问你“输入URL回车之后,究竟发生了什么”一样,看看你能说出多少了. 之前腾讯面试的实话,也问到这 ...

  9. jeecg之弹窗插件lhgdialog小结

    说到弹窗,在jeecg中弹窗用到最多的地方无非是新增/编辑的弹窗. 1.列表页面新增编辑按钮触发的弹窗即lhgdialog,不论是add/update,最终走的都是curdtools.js中的crea ...

  10. P1100 高低位交换

    题目描述 给出一个小于2^{32}232的正整数.这个数可以用一个3232位的二进制数表示(不足3232位用00补足).我们称这个二进制数的前1616位为“高位”,后1616位为“低位”.将它的高低位 ...