<!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. axios与vue的配合使用事例，实现缓存和重复加载的控制

    import Vue from "vue"; import qs from "qs"; import Store from "../vuex/stor ...

  2. fedora 26 安装 mplayer smplayer

    dnf install mplayer dnf install smplayer 提示仓库 里没有这个软件 fedora默认不提供一些有版权争议的软件,非开源的项目包,所以需要用rpm fusion源 ...

  3. !!常用HTML代码

    META: <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> “IE=e ...

  4. jtable时间编辑器

    最近在做一个项目,很烦,用的swing,但是不管怎样也还是啃下来了,但是碰到一个问题,要在jtable里编辑时用一个时间选择器,因为走了许多弯路,找到挺多jar包,耗时较久,所以记录一下,便于以后查阅 ...

  5. 使用Java的URL/HttpURLConnection进行远程调用(POST请求)

    利用Java的HttpURLConnection进行远程url请求(调用远程接口) 测试类:请求类型为json,以post方式请求,利用OutputStream写入数据 实体类: public cla ...

  6. Spark-shell错误：Missing Python executable 'python', defaulting to ...

    最近博主因为学习<云计算导论>一课,需要在Windows上搭建Saprk,故在网上找了相关教程搭建,步骤如下: 1. Scala 2.Spark 3.Handoop 但是不管博主怎么修正, ...

  7. mysql左连接右连接（查询两张表不同的数据）

    有两张表:一张A表he一张B表 left join(左联接) 返回包括左表中的所有记录和右表中联结字段相等的记录 :right join(右联接) 返回包括右表中的所有记录和左表中联结字段相等的记录: ...

  8. js一行代码解决各种IE兼容问题

    在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实 IE给出了解决方案 Google也给出了解决方案 百度也应用了这种方案去解决IE的兼容问题 百度源代码如下 <!Doctype html ...

  9. Spring再接触 整合Hibernate

    首先更改配置文件 <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http ...

  10. Taro开发微信小程序之利用腾讯地图sdk标记

    首先要下载腾讯地图提供的sdk,放在项目的对应目录下,引用. import QQMapWX from '../../sdks/qqmap-wx-jssdk' 设置好后,就可以开始使用了. let qq ...