<!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. Wiki版产品需求---产品需求文档到底是谁的？产品到底是谁的？

    在听了测试的一通唠叨之后,"内部实现一堆逻辑,只有一句话的需求文档","文档那么简单,我们怎么测试啊",心中突然想起来自己曾经干的一件当时觉得还不错的事情,但是 ...

  2. Java技术——Interface与abstract类的区别

    )抽象类是对类抽象,是面向整个类的自下而上的设计理念,一般是先有各种子类,再有把这些有关系的子类加以抽象为父类的需求.而接口是对行为的抽象,是面向行为的自上而下的设计理念,接口根本就不需要知道子类的存 ...

  3. ELKStack入门篇（二）之Nginx、Tomcat、Java日志收集以及TCP收集日志使用

    1.收集Nginx的json格式日志 1.1.Nginx安装 [root@linux-node1 ~]# yum install nginx -y [root@linux-node1 ~]# vim ...

  4. [WC2010]重建计划 长链剖分

    [WC2010]重建计划 LG传送门 又一道长链剖分好题. 这题写点分治的人应该比较多吧,但是我太菜了,只会长链剖分. 如果你还不会长链剖分的基本操作,可以看看我的长链剖分总结. 首先一看求平均值最大 ...

  5. Unity商店下载的文件保存路径？

    Win7系统: C:\Users\系统用户名\AppData\Roaming\Unity\Asset Store MAC:"~/Library/Unity/Asset\ Store" ...

  6. JUC——ThreadFactory线程工厂类（四）

    ThreadFactory线程工厂类 在默认情况下如果要想创建一个线程类对象,大部分情况的选择是:直接通过子类为父类进行实例化,利用Runnable子类为Runnable接口实例化. 或者直接调用La ...

  7. Vue学习计划基础笔记(六) - 组件基础

    组件基础 目标: 掌握组件的构建方式 掌握如何复用组件.父子组件如何传值.如何向父组件发送消息 掌握如何通过插槽分发内容 了解解析dom模板时的注意事项 了解动态组件 组件 组件理解起来大概上就和ph ...

  8. Siki_Unity_3-8_Lua编程（未完）

    Unity 3-8 Lua编程 任务1&2&3:前言 课程内容: Lua从入门到掌握 为之后的xLua和其他热更新方案打下基础 任务4:Lua简介 Lua是轻量小巧的脚本语言--无需编 ...

  9. IDE看代码，挺好

    初学编程的时候总是收到各种警告:“刚学习编程千万不要用IDE,否则会有xxxxxx的后果”.现在工作后发现使用IDE可以方便编写和查看代码,对于较大的项目来说有很多代码,代码之间的关系也比较复杂,ID ...

  10. Elasticsearch 统计代码例子

    aggs avg 平均数 最近15分钟的平均访问时间,upstream_time_ms是每次访问时间,单位毫秒 { "query": { "filtered": ...