jQuery回到顶部

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Back to Top</title>

    <link rel="stylesheet" href="">

    <style>

        #content {

            height: 2000px;

        }

        #back-to-top.show {

            opacity: 1;

        }

        #back-to-top {

            position: fixed;

            bottom: 40px;

            right: 40px;

            z-index: 9999;

            width: 32px;

            height: 32px;

            text-align: center;

            line-height: 30px;

            background: #f5f5f5;

            color: #444;

            cursor: pointer;

            border-radius: 2px;

            text-decoration: none;

            opacity: 0;

            transition: opacity .2s ease-out;

            border: 1px solid #ddd;

        }

    </style>

</head>

<body>

    <div id="content">Scroll &darr;</div>

    <a href="#" id="back-to-top" title="Back to top">&uarr;</a>

    <script src="jquery-1.9.0.min.js"></script>

    <script>

        if ($('#back-to-top').length) {

            var scrollTrigger = 100; // px

            // $(window).scrollTop()与 $(document).scrollTop()产生结果一样

            // 一般使用document注册事件，window使用情况如 scroll, scrollTop, resize

            $(window).on('scroll', function () {

                if ($(window).scrollTop() > scrollTrigger) {

                    $('#back-to-top').addClass('show');

                } else {

                    $('#back-to-top').removeClass('show');

                }

            });

            $('#back-to-top').on('click', function (e) {

                // html,body 都写是为了兼容浏览器

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

                    scrollTop: 0

                }, 700);

                return false;

            });

        }

    </script>

</body>

</html>

jQuery回到顶部的更多相关文章

  1. Jquery 回到顶部

    转:http://www.cnblogs.com/DemoLee/archive/2012/04/20/2459082.html 用jQuery实现渐隐渐显的返回顶部效果(附多图)   先来看几个图片 ...

  2. jQuery回到顶部插件jQuery GoUp

    插件描写叙述 jQuery GoUp!是一个简单的jQuery插件,让你的网页用户直接回到顶部. 用法很easy 引用jquery库和jquery.goup.min.js到你的页面 <scrip ...

  3. html css jquery 回到顶部按钮

    今天做了个回到顶部的功能,在这里记录一下,有需要可以拿去试试! CSS部分,很简单就一个class /*回到顶部*/ .back-top { position: fixed; right: 15px; ...

  4. Jquery回到顶部插件【query.scrollUp.js】使用

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta na ...

  5. jquery 回到 顶部

    1. 页面内容较多, 从底部超链接 点击回到页面顶部 // 回到顶部 var $top = $('<a class="doc-gotop" href="javasc ...

  6. Jquery回到顶部功能

    问题描述: 在网页中,我们经常会由于网页内容过长,而需要在浏览网页时有一个快速回到网页顶部的功能,在浏览网页内容离顶部有一段距离时,出现快速回到网页顶部的工具,从而能使我们的网页更人性化. 问题的产生 ...

  7. jquery 回到顶部，简洁大方

    效果

  8. JQuery 回到顶部效果

    图片,CSS/HTML/JS代码都在,可以直接用了. CSS代码 <style type="text/css"> #gs_feedback_gotop { _displ ...

  9. Jquery回到顶部效果

    <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...

随机推荐

  1. 初涉JavaScript模式 (10) : 函数 【进阶用法】

    写在前面 不知不觉写到第10篇了.这篇写起来很忐忑,终于和高级搭上边了(呵呵),这篇我们 主要 说一下 JS 方法的部分高级用法(我知道的),笔者水平有限,难免有错.废话不多少,进入正文. 初始化 我 ...

  2. window.onload() 等待所有的数据加载都完成之后才会触发

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 简述Seesion和Cookie

    1.0 为什么需要session和cookie? 当用户在发送一个请求关得到返回信息之后,客户端与服务器端之间的网络连接就已经断开了,在下一个请求发送时,服务器无法确定这次请求和上次的请求是否来自同一 ...

  4. android.os.NetworkOnMainThreadException 在4.0之后谷歌强制要求连接网络不能在主线程进行访问

    谷歌在4.0系统以后就禁止在主线程中进行网络访问了,原因是: 主线程是负责UI的响应,如果在主线程进行网络访问,超过5秒的话就会引发强制关闭, 所以这种耗时的操作不能放在主线程里.放在子线程里,而子线 ...

  5. Java文件末尾追加字符串

    Java进行文件输出时,有时候想直接向已有文件末尾追加字符,而不是从头开始写,可以采用以下三种方式实现: package test; import java.io.File; import java. ...

  6. 转：Centos6.3添加解码器播放MP3和常见视频音频

    原文来自于:http://blog.csdn.net/odaynot/article/details/8462273 参考地址: http://wiki.centos.org/AdditionalRe ...

  7. ISO15693协议的Inventory

    ISO15693的Inventory指令看起来比较让人迷糊,想明白其流程,我认为以下几点是必须了解的: 第一.ISO15693标签的几种状态,资料上有,这里罗嗦重复一下: 1.PowerOff状态 2 ...

  8. bit和sbit的区别

    1．bit和sbit都是C51扩展的变量类型. bit和int char之类的差不多,只不过char=8位, bit=1位而已.都是变量,编译器在编译过程中分配地址.除非你指定,否则这个地址是随机的. ...

  9. POJ1789 Truck History(prim)

    题目链接. 分析: 最大的敌人果然不是别人,就是她(英语). 每种代表车型的串,他们的distance就是串中不同字符的个数,要求算出所有串的distance's 最小 sum. AC代码如下: #i ...

  10. POJ3041 Asteroids(二分图最大匹配)

    题目链接. 分析: 暂略. AC代码: #include <iostream> #include <cstdio> #include <cstring> #incl ...