<!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. wpf- DataGrid 常用属性和事件

    组件所在命名空间: System.Windows.Controls 组件常用方法: BeginEdit:使DataGrid进入编辑状态. CancelEdit:取消DataGrid的编辑状态. Col ...

  2. day 4 名片管理系统 -函数版

    修改没有用函数的程序 具有独立功能的代码块 源程序 #1.打印功能信息 print("*"*50) print("\t名片管理系统 V3\t") print(& ...

  3. 2018.10.17校内模拟赛：T2神光

    题面:pdf 首先排序,二分,然后怎么判定是否可行. 最简单的思路是,dp[i][j][k],到第i个,用了j次红光,k次绿光,前i个点都选上了,是否可行.然后转移就行. 然后考试的时候就想到这了,往 ...

  4. Nginx入门篇（三）之虚拟主机配置

    一.虚拟主机概念 所谓虚拟主机,在Web服务当中就是一个独立的网站站点,这个站点对应独立的域名(也有可能是IP或者端口),具有独立的程序和资源目录,可以独立地对外提供服务供用户访问. 这个独立的站点在 ...

  5. python 布尔值 bool( ) 与逻辑运算符

    逻辑运算符 not and or 运算符优先级 not > and >or printer(x or y)  x为非零,则返回x,否则返回y print(1 or 2) print(3 o ...

  6. 二、Web框架实现

    一.简单web(socket) 在前一篇WEB框架概述一文中已经详细了解了:从浏览器键入一个URL到返回HTML内容的整个过程.说到底,本质上其实就是一个socket服务端,用户的浏览器其实就是一个s ...

  7. Java or Python？测试开发工程师如何选择合适的编程语言？

    很多测试开发工程师尤其是刚入行的同学对编程语言和技术栈选择问题特别关注,毕竟掌握一门编程语言要花不少时间成本,也直接关系到未来的面试和就业(不同企业/项目对技术栈要求也不一样),根据自身情况做一个相对 ...

  8. 【转】lvs、nginx、haproxy转发模式优缺点总结

    原文地址: https://yq.aliyun.com/ziliao/78374 一.LVS转发模式 LVS是章文嵩博士写的一个工作于四层的高可能性软件.不像后两者支持七层转发,不过也正因为其简单,所 ...

  9. python sys.argv是什么？

    1.sys.argv 是获取运行python文件的时候命令行参数,且以list形式存储参数 2.sys.argv[0] 代表当前module的名字 下面的代码文件是a.py,当我不用IDE工具,只用命 ...

  10. .NET 4.0 Tuple 元组

    Tuple是.NET 4.0的新特性,主要功能是动态返回数据结构,也可以用做临时数据结构. 原来做一些功能时需要一个方法返回几个值,有两种方法: 1. 非常难看.难用的OUT参数: 2. 新写一个实体 ...