<!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. Integer ==判断遇到的问题

      今天开发过程中,遇到 这样的一个问题 public class Test { public static void main(String[] args) { Integer aa = 12345 ...

  2. C# 字符串中特定字符判断

    /// <summary> /// 计算字符串中子串出现的次数 /// </summary> /// <param name="str">字符串 ...

  3. POP3、SMTP端口（SSL、TSL）

    POP3服务器地址: 110           995 支持SSLSMTP服务器地址: 25            465 或者 587 支持SSL(TSL) 465端口是SSL/TLS通讯协议的 ...

  4. Stop-VM

    stop-vm vm01 -force  正常关机,留给Guest 5分钟保存数据,然后关闭 stop-vm vm02 -turnoff 断电关机 Windows Server 2008 R2默认没有 ...

  5. PreApplicationStartMethod特性说明

    PreApplicationStartMethod主要用于为程序集指定一个方法,在程序集加载时进行一些自定义的初始化处理. 使用方式如下所示,首先在程序集中定义一个公共类型和一个公共静态的方法 然后我 ...

  6. Java Web项目部署

    打包 使用Eclipse打包JAVA Web项目 如下 在项目上单击右键选择Export-选择JavaEE文件夹-选择WAR file(MyEclipse),单击Next>如图所示,选择存放打包 ...

  7. August 08th 2017 Week 32nd Tuesday

    The very essence of romance is uncertainty. 浪漫的精髓就在于它充满种种可能. Romance is the glamour that can turn th ...

  8. 低版本兼容使用Fragment (转）

    Fragment框架开发东西确实很方便,但是恼人的是从4.0才开始支持.以前的版本必须用兼容模式开发,本人在网上找了大量资料,终于找到些线索正常运行于2.1版本的安卓系统.现在浅说一下兼容版本使用Fr ...

  9. 4、Node.js REPL(交互式解释器)

    Node.js REPL(Read Eval Print Loop:交互式解释器) 表示一个电脑的环境,类似 Window 系统的终端或 Unix/Linux shell,我们可以在终端中输入命令,并 ...

  10. Linux的CPU相关知识

    超线程和多线程的区别? 超线程从硬件层面理解,即一个CPU的部件(可以理解为核)同时执行多条指令,表现就是同时执行多个线程.多线程是软件层面的概念,比如CPU只有一个核,通过线程调度可以在一个时间段内 ...