<!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. Vue实例对象的数据选项（火柴）

    前言 一般地,当模板内容比较简单的时候,使用data选项配合表达式即可.涉及到复杂逻辑时,则需要用到methods.computed.watch等方法.本文将详细介绍Vue实例对象的数据选项. dat ...

  2. 软工读书笔记 week 1

    这次读书笔记主要是就<程序员修炼之道>这本书的前半部分做一些总结以及发表一些自己的看法. 本书前面的一部分主要是一些程序员应该在工作中时刻注意的事情,一些关键的信息如下: 1.处理问题的态 ...

  3. 原生mybaits学习笔记

    目录 简介 maven引入 核心配置文件 方式一(简单) 配置 操作 方式二(old) 创建接口 配置mapper.xml 实现接口 操作 方式三(常用) 创建接口 配置mapper.xml 操作 配 ...

  4. 如何解决MSSQL中文数据乱码问题

    今天遇到了在数据库中直接写SQL语句,语句中包含中文,但是数据库的表里是包含“?” 的乱码. 我程序代码中,调试时得到的SQL不是乱码,在控制台中也不是乱码.但是在数据库中却出现了乱码. 当用MSSQ ...

  5. oracle sql练习 菜鸟入门！

    进入公司 ,首先是进行SQL培训 一下是针对oracle的emp与dept表进行的基础查询 --1.选择部门30中的所有员工: ; --2.列出所有办事员(CLERK)的姓名,编号和部门编号: sel ...

  6. LNMP-day2-进阶

    部署LNMP环境 http://www.cnblogs.com/wazy/p/8386493.html 安装部署wordpress #下载wordpress [root@locahost downlo ...

  7. 在python命令行执行sudo命令

    def test(): sudoPassword = 'test' command = '/opt/lampp/lampp stopmysql' str = os.system('echo %s|su ...

  8. 相同数据源情况下，使用Kafka实时消费数据 vs 离线环境下全部落表后处理数据，结果存在差异

    原因分析: 当某个consumer宕机时,消费位点(例如2s提交一次)尚未提交到zookeeper,此时Kafka集群自动rebalance后另一consumer来接替该宕机consumer继续消费, ...

  9. scala当中的类型参数

    类型参数主要就是研究scala当中的类或者scala当中的方法的泛型 1.scala当中的类的泛型         object Demo8 {          def main(args: Arr ...

  10. 基础知识：Promise（整理）

    基础知识:Promise(整理) (来自牛客网)下面关于promise的说法中,错误的是(D) A. resolve和reject都是直接生成一个进入相应状态的promise对象,其参数就是进入相应状 ...