<!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. Hadoop守护进程的作用（转）

    概述: <ignore_js_op> Hadoop是一个能够对大量数据进行分布式处理的软件框架,实现了Google的MapReduce编程模型和框架,能够把应用程序分割成许多的 小的工作单 ...

  2. sql语句-5-联接组合查询

  3. 韦大仙--LoadRunner压力测试：详细操作流程

    一. 录制脚本 1.安装完毕后,创建脚本: 点击OK之后,会弹出网址,之后创建Action,每进一个页面添加一个Action,录制结束后,终止录制. 二. 修改脚本 1.脚本参数化 将登录的用户名密码 ...

  4. 自动化运维工具saltstack01 -- 之SaltStack介绍、安装与基础使用

    SaltStack介绍 官网地址:http://www.saltstack.com 官方文档地址:http://docs.saltstack.com Github:http://Github.com/ ...

  5. git remote add origin错误

    如果输入$ Git remote add origin git@github.com:djqiang(github帐号名)/gitdemo(项目名).git 提示出错信息:fatal: remote ...

  6. 【实用】巧用For xml 生成HTML代码

    可以利用SQL的For xml直接生成HTML结构,比如我想生成如下结构: <li> <img src="..."/> <input type=&qu ...

  7. Centos7.2部署saltstack

    原文发表于cu:2016-06-23 参考文档: Saltstack安装文档:https://repo.saltstack.com/#rhel saltstack的安装与简单配置,应用. 一．环境 S ...

  8. hdu - 6282，2018CCPC湖南全国邀请赛G题，字符串，规律

    HDU – 6282 http://acm.hdu.edu.cn/showproblem.php?pid=6282 by Hzu_Tested 题意:给出两个字符串S和T,只由a,b,c三种字符组成( ...

  9. Bean的装配

    1.可以从ApplicationContext上下文获取和bean工厂获取容器,bean工厂只建议在移动端应用使用. 2.如果使用的是applicationContext配置的是bean,如果作用域是 ...

  10. [笔记] postgresql 流复制（streaming replication）

    基本环境说明: os:FreeBSD 9.3 postgresql version: master:192.168.56.101 standby:192.168.56.102 安装过程略,基于pkg包 ...