<!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. 对View的onMeasure()方法的进一步研究

    在Android开发中,很多人对自定义View是望而生畏,但这又是向高级进阶的必经之路,主要是对View里面的很多方法不知道怎么理解,其中一个就是onMeasure()方法. 首先,我自定义一个MyV ...

  2. Java软件编码规范要求

    1.一个类对应一个文件,文件名与类名保持一致 虽然一个“.java”源文件可以有多个类(不是内部类),但是不提倡那么写.

  3. c# 设计模式 之：抽象工厂

    1.作用:抽象工厂的目的就是生产[产品族],之前讲的“工厂模式”的每一个factory只造一种产品,抽象工厂让一个factory造多个产品. uml类图: 代码实现: 抽象工厂代码: namespac ...

  4. JDBC连接数据库反射实现O/R映射

    测试preparedStatement public void testPreparedStatement(){ Connection connection=null; PreparedStateme ...

  5. linux 无法安装gcc, 可以试试换用 阿里的yum

    1.备份 mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup 2.下载新的CentOS-Base ...

  6. APP中的 H5和原生页面如何分辨？

    一.APP内嵌H5和原生的区别 1.原生的页面运行速度快,比较流畅.H5页面相对原生的运行性能低,特别是一些动画效果有明显卡顿. 2.H5页面的很多交互都没有原生的好,比如弹层.输入时候的页面滑动 等 ...

  7. 最优化作业 共轭梯度法 matlab代码

    syms f x1 x2 f=(1/2)*x1^2+x2^2; x=[2;1]; a=[1 0;0 2];% A g1=diff(f,x1); g2=diff(f,x2); g=[g1;g2];%导数 ...

  8. [COGS 2066]七十和十七

    2066. 七十和十七 ★★★   输入文件:xvii.in   输出文件:xvii.out   简单对比时间限制:1 s   内存限制:256 MB [题目描述] 七十君最近爱上了排序算法,于是Ta ...

  9. 51nod 1102 面积最大的矩形

    题目地址在这儿 求取:以某矩形g[i]为最小值的区间的左右端点,得到一个临时解.所有临时解中的最大值即为解. 求取区间的方法可以用单调栈,也可以用下面这种十分简洁的类似于递归的方法.下面这种解法求出来 ...

  10. Ubuntu 14.04 下安装Skype

    操作1: Ubuntu 14.04 下安装Skype,使用 Ctr+Alt+T组合键打开终端Terminal,输入如下即可: wget -O skype.deb http://download.sky ...