<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>回到顶部</title>

        <style type="text/css">

            body {

                height: 8000px;

            }

            h1{

                color: #000;

            }

            img {

                position: fixed;

                bottom: 50px;

                right: 50px;

                width: 150px;

                height: 195px;

                display: none;

                z-index: 100;

            }

        </style>

    </head>

    <body>

        <!-- 返回顶部小火箭 -->

        <img src="img/gotop.gif" />

        <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>

        <script>

            $(function(){

                $(window).scroll(function(){//scroll 页面滚动事件

                    var  sTop=$(window).scrollTop();//scrollTop  滚动距离

                    if (sTop>=500) {

                        /*

                         * 都可以实现显示的作用

                         * $("img").show();

                        $("img").css("display","block")*/

                        $("img").fadeIn();

                    } else{

                    /*    都可以实现隐藏的作用

                     *

                     * $("img").hide()

                            $("img").css("display","none")*/

                        $("img").fadeOut()

                    }

                })

                $("img").click(function(){

                    $("body,html").animate({scrollTop:0},500)

                })

            })

        </script>

    </body>

</html>

jQuery实现页面回到顶部功能的更多相关文章

  1. jquery 插件页面回到顶部

    引用: jquery.scrollUp.min.js js: $.scrollUp({ scrollName: 'scrollUp', // Element ID topDistance: '300' ...

  2. js实现回到顶部功能

    js实现回到顶部功能 一.总结 一句话总结: 可以通过js或者jquery可以很快的控制页面的属性,比如高度等等 //设置当前视口的顶端数值 var setScrollTop = function(t ...

  3. jquery实现页面置顶功能代码

    <html> <head> <title></title><script type='text/javascript> //回到顶部功能 f ...

  4. jQuery写toTop(回到顶部)效果

    在通常的网站开发中,页面有时候会很长,尤其是一些电商网站,为了提高用户的体验效果,我们通常会增加一个回到顶部的按钮,这个按钮我们同城会使用fixed定位,将其定位在当前可视区域某一固定位置.这个效果用 ...

  5. js——页面回到顶部

    很久都没有去慕课网学习学习了,刚恰好就看见了一个用的比较多的小例子——页面回到顶部,记得之前自己也是在初学web时,被这个坑了一回,因此今天特地拿来分享分享…… <!DOCTYPE html&g ...

  6. 通过javascript库JQuery实现页面跳转功能代码

    通过javascript库JQuery实现页面跳转功能代码的四段代码实例如下. 实例1: 1 2 3 4 $(function(){ var pn = $("#gotopagenum&quo ...

  7. jQuerry点击按钮回到顶部功能

    简单实现点击按钮回到顶部功能

  8. jquery javascript 回到顶部功能

    今天搞了一个回到顶部的JS JQ功能 (function($){ $.fn.survey=function(options){ var defaults={width:"298", ...

  9. web页面浮动回到顶部功能和浮动广告

    实现测试浮动回到顶部 法一:用js实现<%@ Page Language="C#" AutoEventWireup="true" CodeBehind=& ...

随机推荐

  1. 中间件（WAS、WMQ）运维 9个常见难点解析

    本文由社区中间件达人wangxuefeng266.ayy216226分享整理,包括WAS.WMQ在安装.巡检.监控.优化过程中的常见难点. 安装 1.was 负载均衡的机制的粘连性,was负载均衡异常 ...

  2. 转移RMS模拟器

    在PowerShell中识别当前 RMS 模拟器 get-SCOMRMSemulator ?移至另一个管理服务器 –首先将一个新的RMS模拟器管理指定为一个变量 $MS = get-scommanag ...

  3. 关于用GetManifestResourceNames读不出资源文件的解决

    在写程序时,需要读出所有资源的图片文件,程序工作正常, Assembly asm = Assembly.GetExecutingAssembly();string[] resourceNames = ...

  4. webpack笔记一 起步

    webpack笔记一 起步 安装 对于大多数项目,我们建议本地安装(--save-dev).这可以在引入突破式变更(breaking change)版本时,更容易分别升级项目. 起步 初始化项目 mk ...

  5. Linux性能监控（程序篇）

    性能数据的监控,除了针对整机进行外,还要求我们对某一运行的程序单独进行.常用的程序监控命令有ps和top. Ps ps命令最常用的还是用于监控后台进程的工作情况,因为后台进程是不和屏幕键盘这些标准输入 ...

  6. 深入剖析php执行原理（2）：函数的编译

    本文只探讨纯粹的函数,并不包含方法.对于方法,会放到类.对象中一起研究. 想讲清楚在zend vm中,函数如何被正确的编译成op指令.如何发生参数传递.如何模拟调用栈.如何切换作用域等等,的确是一个很 ...

  7. Angular2 Pipe

    AngularJs 1.x 中使用filters来帮助我们转换templates中的输出,但在Angular2中使用的是pipes,以下展示Angular 1.x and Angular 2中filt ...

  8. 由JDK源码学习HashMap

    HashMap基于hash表的Map接口实现,它实现了Map接口中的所有操作.HashMap允许存储null键和null值.这是它与Hashtable的区别之一(另外一个区别是Hashtable是线程 ...

  9. 【4】【MOOC】Python游戏开发入门-北京理工大学【第三部分-游戏开发之机制（色彩与绘图）】

    学习地址链接:http://www.icourse163.org/course/0809BIT021E-1001873001?utm_campaign=share&utm_medium=and ...

  10. Spring framework 反序列化的漏洞

    理解这个漏洞需要先看freebuff上的jdni的小例子. jndi注入在jdk8u121绕过参考这俩篇文章: https://bl4ck.in/tricks/2019/01/04/JNDI-Inje ...