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. Linux 4.1内核编译报告

    编译环境 Arch Linux on VirtualBox 下载内核 https://www.kernel.org/ 下载的内核压缩包,此时的最新内核版本为4.1: 解压包 # tar -xvJf l ...

  2. 50个jQuery代码段帮你成为更好的JavaScript开发者

    1. 如何创建嵌套的过滤器: 允许你减少集合中的匹配元素的过滤器,只剩下那些与给定的选择器匹配的部分.在这种情况下,查询删除了任何没(:not)有(:has)包含class为“selected”(.s ...

  3. RedHat9上安装jdk

    1.先在windows下载jdk:jdk-6-dlj-linux-i586.bin 2.用ftp上传给linux下 3.chmod 777 jdk-6-dlj-linux-i586.bin 4.将jd ...

  4. JS笔记2 --定义对象

    16.javascript中定义对象的几种方式(javascript中没有类的概念,只有对象): 1)基于已有对象扩充其属性和方法: var object = new Object(); object ...

  5. weekly review

    鉴于某位昔日工作在我身边的大师一直在写review,所以为了能靠近大师,我也要开始写review了. 无名师曾经说过,想要成为大师的话,要先找到一个大师,然后追随大师,再然后与大师通行,之后成为大师, ...

  6. Python下划线的使用 _ __ __obj__

    Python 用下划线作为变量前缀和后缀指定特殊变量.   _xxx 不能用'from moduleimport *'导入 __xxx__ 系统定义名字 __xxx 类中的私有变量名   核心风格:避 ...

  7. Forms & HTML 组件 - laravelcollective/html

    简书链接 :Forms & HTML 组件 - laravelcollective/html 安装 方法一: composer require laravelcollective/html 方 ...

  8. 利用Asio搭建日志系统

    Asio(http://think-async.com)官方示例中给出了一个比较初步的日志服务,主要代码在basic_logger.hpp.logger_service.hpp.logger_serv ...

  9. ISO7816协商模式和特定模式

    ISO7816协议的协商模式和特定模式好多使用者都搞不明白,还经常有客户电话询问,这里将其澄清一下: ISO7816协议的协商模式和特定模式由复位应答字节TA2确定,下面是TA2的字节定义 TA2的存 ...

  10. 《how to design programs》13章用list构造表

    使用cons构造一个包含多个元素的表十分麻烦,因此scheme提供了list操作,该操作接受任意量的值作为输入以创建一个表,下面是扩展的语法: <prm>=list 扩展的scheme值的 ...