<!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 带刻度的滑动条实现

    原文:WPF 带刻度的滑动条实现 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/BYH371256/article/details/83507170 ...

  2. Spring框架实例

    一,介绍 Spring框架核心是Ioc控制反转,只要在容器中注册以后,依赖从容器中获取即可 简单的理解:需要一个值,在程序中定义一个变量,但是不赋值,只设置set方法,运行时,容器为该变量赋值 二,实 ...

  3. 人脸识别引擎SeetaFaceEngine中Identification模块使用的测试代码

    人脸识别引擎SeetaFaceEngine中Identification模块用于比较两幅人脸图像的相似度,以下是测试代码: int test_recognize() { const std::stri ...

  4. OpenCL入门：(二：用GPU计算两个数组和)

    本文编写一个计算两个数组和的程序,用CPU和GPU分别运算,计算运算时间,并且校验最后的运算结果.文中代码偏多,原理建议阅读下面文章,文中介绍了OpenCL相关名词概念. http://opencl. ...

  5. OpenCL入门：(一：Intel核心显卡OpenCL环境搭建)

    组装的电脑没带独立显卡,用的是CPU自带的核显,型号是Intel HD Graphics 530,关于显卡是否可以使用OpenCL,可以下载GPU-Z软件查看. 本文在Windows 10 64位系统 ...

  6. python全栈开发-前方高能-生成器和生成器表达式

    python_day_13 今日主要内容1. 生成器和生成器函数生成器的本质就是迭代器生成器的三种创建办法: 1.通过生成器函数 2.通过生成器表达式创建生成器 3.通过数据转换 生成器函数: 函数中 ...

  7. 二叉树的深度<java版>

    二叉树的结构 二叉树是比较常见的一种的一种数据结构. 首先看看二叉树的数据结构: //由左节点和右节点以及一个节点值构成 public class TreeNode{ TreeNode leftNod ...

  8. 堆中的路径（MOOC）

    将一系列给定数字插入一个初始为空的小顶堆H[].随后对任意给定的下标i,打印从H[i]到根结点的路径. 输入格式: 每组测试第1行包含2个正整数N和M(≤),分别是插入元素的个数.以及需要打印的路径条 ...

  9. 【python 3.6】python读取json数据存入MySQL（二）

    在网上找到一个包含全国各省市经纬度的json文件,也可以通过上次的办法,解析json关键字,构造SQL语句,插入数据库. JSON文件格式如下: [ { "name": " ...

  10. 完美的【去重留一】SQL

    DELETE consum_record FROM consum_record, ( SELECT min(id) id, user_id, monetary, consume_time FROM c ...