<!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. js 解密

    需求:爬取https://www.xuexi.cn/f997e76a890b0e5a053c57b19f468436/018d244441062d8916dd472a4c6a0a0b.html页面中的 ...

  2. Java 公平锁与非公平锁学习研究

    最近学习研究了一下Java中关于公平锁与非公平锁的底层实现原理,总结了一下. 首先呢,通过其字面意思,公平与非公平的评判标准就是付出与收获成正比(和社会中的含义差不多一个意思).放到程序中,尤其是 在 ...

  3. AND 初识

    框架

  4. Gradle史上最详细解析

    转自:https://www.cnblogs.com/wxishang1991/p/5532006.html 郑重申明本文转自邓凡平老师的 http://www.infoq.com/cn/articl ...

  5. Java序列化相关

    java类实现serializable有什么好处或意义 一个对象序列化的接口,一个类只有实现了Serializable接口,它的对象才是可序列化的.因此如果要序列化某些类的对象,这些类就必须实现Ser ...

  6. mac eclipse中运行tomcat出现错误：-Djava.endorsed.dirs=D:\Tomcat 9.0\endorsed is not supported

    -Djava.endorsed.dirs=D:\Tomcat 9.0\endorsed is not supported. Endorsed standards and standalone APIs ...

  7. 关于python的一些想法

    我来自信息管理与信息系统专业,大一学过c语言但不太精通.学习python是为了学会这门新语言,据了解python会慢慢成为主流编程语言. 因为对绘图方面很感兴趣,希望老师能够在课上多讲一些这方面的东西 ...

  8. （转）get和post的区别

    Http定义了与服务器交互的不同方法,最基本的方法有4种,分别是GET,POST,PUT,DELETE.URL全称是资源描述符,我们可以这样认为:一个URL地址,它用于描述一个网络上的资源,而HTTP ...

  9. 12Linux_Apache_vsftpd(匿名开发模式)

    网站:让我们的用户可以通过浏览器去访问到的文档的资源. windows:IIS Linux:Apache Nginx(吃得少,干的多) APACHE:基金会,公司,软件 httpd:软件名称,软件包名 ...

  10. react组建生命周期

    实例化 首次实例化 getDefaultProps   //创建默认 props getInitialState     //创建 默认的State componentWillMount   //在装 ...