<!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. Keras bug in model.predict

    When I use Keras to predict behind a web service, it occurred an error. and the error message is lik ...

  2. realm清空所有数据库的数据

    /* *清空数据库 */ public int clearDatabase() { Realm realm = Realm.getDefaultInstance(); try { realm.begi ...

  3. IntelliJ IDEA 集成 SVN

    在idea中使用subversion提交代码需要使用SVN SVN下载官网:https://tortoisesvn.net/downloads.html 可以根据自己电脑下载相应的版本,如果安装了的需 ...

  4. PHP实现防止SQL注入的2种方法

    PHP简单实现防止SQL注入的方法,结合实例形式分析了PHP防止SQL注入的常用操作技巧与注意事项,PHP源码备有详尽注释便于理解,需要的朋友可以参考下! 方法一:execute代入参数 $var_V ...

  5. 移动端常用UI框架

    作为一个前端人员来说,总结几款相对来说不错的用于移动端开发的UI框架是非常必要的,以下几种移动端UI框架就能基本满足工作中开发需要,根据项目需求,选用合适的框架搭建项目,更能容易提高开发效率. 一.M ...

  6. 使用ThreadPoolExecutor进行多线程编程

    ThreadPoolExecutor有四个构造函数,分别是: 1,ThreadPoolExecutor(int corePoolSize, int maximumPoolSize, long keep ...

  7. C++_数字时钟软件实现设计

    利用C++学习内容,通过windows自带函数实现一个简易的时钟 #include<iostream> #include<windows.h> //延时与清屏头文件 using ...

  8. HTML5 关于一些本地操作 cookie，sessionStorage，localStorage

    1,b/s 开发中经常会使用到 cookie,大部分情况下,都是由后端代码实现,那么 js 怎么实现对 cookie 的操作呢? <!DOCTYPE html> <html> ...

  9. pyqt5 -——菜单和工具栏

    一. 状态栏 # -*- coding: utf-8 -*-# @Time : 2018/12/22 12:37# @Author : Bo# @Email : mat_wu@163.com# @Fi ...

  10. python中TCP协议中的粘包问题

    TCP协议中的粘包问题 1.粘包现象 基于TCP实现一个简易远程cmd功能 #服务端 import socket import subprocess sever = socket.socket() s ...