<!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. 学习MeteoInfo二次开发教程（十）

    1.复制文件cloud_1009271330.000,I-01.pal 2.改: GridData cloud = aDataInfo.GetGridData(""); 为: Gr ...

  2. 记一次深度系统安装至windows系统盘提示挂载为只读模式问题

    记一次深度系统安装至windows系统盘提示挂载为只读模式问题 来到新公司新电脑自己要安装deepin,安装的时候没考虑双系统直接装至默认win系统盘,导致deepin启动后提示如下: 提示多个挂载分 ...

  3. asp源码微信扫码授权登陆电脑版

    网站接入微信扫码登录并获取用户基本信息(完美绕过微信开放平台)电脑版网站实现微信扫码登录,注册会员还要设密码太麻烦,会员也记不住密码,采用微信扫码登录网站更方便,会员无需设密码,用他的微信做为系统登录 ...

  4. hive动态分区问题--分区为中文

    报错如下: Loading data to table data_da.tmp_wlw_test partition (stat_date=2017-05-11, business_type_name ...

  5. Flink安装部署

    官网:https://ci.apache.org/projects/flink/flink-docs-release-1.7/ops/deployment/cluster_setup.html cd ...

  6. websocket client code html

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. [UnityShader基础]07.MaterialPropertyDrawer

    参考链接: https://blog.csdn.net/e295166319/article/details/60141677 https://docs.unity3d.com/ScriptRefer ...

  8. pymssql包安装方法

    https://docs.microsoft.com/en-us/sql/connect/python/pymssql/python-sql-driver-pymssql

  9. BeautifulSoup模块过滤掉html标签,只拿文本内容(处理XSS攻击)

    from bs4 import BeautifulSoup#kindeditordef kindeditor(request): s = ''' <li><span style=&q ...

  10. bootstrap之bootstrap-table插件使用心得以及实现过程

    1.首先一个页面(增删改查) 2.实现增删改查(一个框架) 3.编码问题(前端meta utf-8:引用中文包:contentType参数区utf-8的设置:响应的utf-8的编码设置) 4.多条件查 ...