<!doctype html>

<html>

    <head>

        <meta charset="utf-8">

        <title>返回顶部</title>

        <meta name="Keywords" content="关键词,关键词">

        <meta name="Description" content="">

        <!--css,js-->

        <style type="text/css">

            *{margin:0;padding:0;}

            p{width:300px; height:200px;background:#ccc; margin:10px auto;}

            .top{width:60px;height:50px;position:fixed;right:22px;bottom:100px;display:none;}

            .top span{width:60px;height:50px;background:url("img/icon_top.png")no-repeat center #000;display:block;box-shadow:2px 4px 10px #ccc;border-radius:4px;cursor:pointer;}

        </style>

        <script type="text/javascript" src="js/jquery.js" ></script>

    </head>

    <body>

        <p>1</p>

        <p>2</p>

        <p>3</p>

        <p>4</p>

        <p>5</p>

        <p>6</p>

        <p>7</p>

        <div class = "top">

            <span></span>

        </div>

        <script type = "text/javascript">

            //返回顶部的小图标的现隐

            $(window).scroll(function(){

                if($(window).scrollTop() >= 100){

                    $(".top").fadeIn(600);

                }else{

                    $(".top").stop(true,true).fadeOut(600);

                }

            });

            //返回顶部

            $(".top").click(function(){

                $("html,body").animate({

                    scrollTop:0

                },800);

            });

        </script>

    </body>

</html>

【JavaScript&jQuery】返回顶部的更多相关文章

  1. JavaScript/Jquery返回顶部代码

    <!DOCTYPE html> <html> <head> <title>返回顶部</title> <meta charset=&qu ...

  2. jquery返回顶部，支持手机

    jquery返回顶部,支持手机 效果体验:http://hovertree.com/texiao/mobile/6/ 在pc上我们很容易就可以用scrollTop()来实现流程的向上滚动的返回到顶部的 ...

  3. jQuery返回顶部（精简版）

    jQuery返回顶部(精简版) <!DOCTYPE html><html lang="en"><head> <meta charset=& ...

  4. 使用Javascript实现返回顶部功能。

    为了提高网站的浏览体验及友好度,相信大部分网站需要一个返回顶部的按钮,如果使用传统的a标记,再做一个div加上链接的话,非常麻烦,不仅每个页面都需要添加,而且不能实现非常智能的效果及简化维护时间. 下 ...

  5. jQuery返回顶部实用插件YesTop

    只需一句jQuery代码实现返回顶部效果体验:http://hovertree.com/texiao/yestop/ 使用方法:只需引用jQuery库和YesTop插件(jquery.yestop.j ...

  6. Jquery返回顶部插件

    自己jquery开发的返回顶部,当时只为了自己用一下,为了方便,修改成了插件... 自己的博客现在用的也是这个插件..使用方便!! <!DOCTYPE html> <html> ...

  7. jquery 返回顶部 兼容web移动

    返回顶部图片 http://hovertree.com/texiao/mobile/6/tophovertree.gif 具体实现代码 <span id="tophovertree&q ...

  8. JavaScript之返回顶部

    为了弄这个Hexo,今天又是坐在电脑面前待了一天( ⊙ o ⊙ ),老是出问题,在百度上也试验了很多方法,还是没弄好,诶...身心疲惫甚是乏累啊~~~ 算了,这个Hexo先不弄,还是安分点吧,在Hex ...

  9. jquery返回顶部特效

    <style> p#back-to-top{position:fixed; bottom:100px;right:10px; display: none; } p#back-to-top ...

  10. Jquery 返回顶部

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

随机推荐

  1. day4 边缘检测Canny

    1.canny边缘检测 # coding=utf-8 import cv2 import numpy as np filename = 'woman.JPEG' #读入图像,以灰度格式 img = c ...

  2. 【LG3723】[AHOI2017/HNOI2017]礼物

    [LG3723][AHOI2017/HNOI2017]礼物 题面 洛谷 题解 首先我们将\(c\)看作一个可以为负的整数,那么我们就可以省去讨论在哪个手环加\(c\)的繁琐步骤了 设我们当前已经选好了 ...

  3. 【MongoDB安装】MongoDB在centos linux平台安装

    参考:http://www.runoob.com/mongodb/mongodb-linux-install.html 一..下载安装包 下载方式: 1.登录官网download,然后通过xftp传到 ...

  4. Android线程管理（三）——Thread类的内部原理、休眠及唤醒

    线程通信.ActivityThread及Thread类是理解Android线程管理的关键. 线程,作为CPU调度资源的基本单位,在Android等针对嵌入式设备的操作系统中,有着非常重要和基础的作用. ...

  5. Maven学习(二)-----Maven启用代理访问

    Maven启用代理访问 如果你的公司正在建立一个防火墙,并使用HTTP代理服务器来阻止用户直接连接到互联网.如果您使用代理,Maven将无法下载任何依赖. 为了使它工作,你必须声明在 Maven 的配 ...

  6. 8个数据清洗Python代码，复制可用，最长11行 | 资源

    最近,大数据工程师Kin Lim Lee在Medium上发表了一篇文章,介绍了8个用于数据清洗的Python代码. 数据清洗,是进行数据分析和使用数据训练模型的必经之路,也是最耗费数据科学家/程序员精 ...

  7. MySQL高性能优化实战总结

    1.1 前言 MySQL对于很多Linux从业者而言,是一个非常棘手的问题,多数情况都是因为对数据库出现问题的情况和处理思路不清晰.在进行MySQL的优化之前必须要了解的就是MySQL的查询过程,很多 ...

  8. Tomcat源码学习（2）——启动过程分析

    Tomcat启动过程分析 启动 tomcat 时,Windows下执行 startup.bat :Linux下执行 startup.sh 文件,实际上最后都是调用 org.apache.catalin ...

  9. Centos 7 zabbix 实战应用

    实际需求:公司已经有了100台服务器,现在需要使用zabbix全部监控起来. 先出个方案(规划) 常规监控:cpu,内存,磁盘,网卡 问题:怎样快速添加100台机器         方法1:使用克隆的 ...

  10. 阿帕奇web服务器下载部署安装运行

    链接: https://jingyan.baidu.com/album/d8072ac47baf0eec95cefdca.html?picindex=4 1.apache服务安装成功可是启动失败“wi ...