jQuery实现页面回到顶部功能
<!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实现页面回到顶部功能的更多相关文章
- jquery 插件页面回到顶部
引用: jquery.scrollUp.min.js js: $.scrollUp({ scrollName: 'scrollUp', // Element ID topDistance: '300' ...
- js实现回到顶部功能
js实现回到顶部功能 一.总结 一句话总结: 可以通过js或者jquery可以很快的控制页面的属性,比如高度等等 //设置当前视口的顶端数值 var setScrollTop = function(t ...
- jquery实现页面置顶功能代码
<html> <head> <title></title><script type='text/javascript> //回到顶部功能 f ...
- jQuery写toTop(回到顶部)效果
在通常的网站开发中,页面有时候会很长,尤其是一些电商网站,为了提高用户的体验效果,我们通常会增加一个回到顶部的按钮,这个按钮我们同城会使用fixed定位,将其定位在当前可视区域某一固定位置.这个效果用 ...
- js——页面回到顶部
很久都没有去慕课网学习学习了,刚恰好就看见了一个用的比较多的小例子——页面回到顶部,记得之前自己也是在初学web时,被这个坑了一回,因此今天特地拿来分享分享…… <!DOCTYPE html&g ...
- 通过javascript库JQuery实现页面跳转功能代码
通过javascript库JQuery实现页面跳转功能代码的四段代码实例如下. 实例1: 1 2 3 4 $(function(){ var pn = $("#gotopagenum&quo ...
- jQuerry点击按钮回到顶部功能
简单实现点击按钮回到顶部功能
- jquery javascript 回到顶部功能
今天搞了一个回到顶部的JS JQ功能 (function($){ $.fn.survey=function(options){ var defaults={width:"298", ...
- web页面浮动回到顶部功能和浮动广告
实现测试浮动回到顶部 法一:用js实现<%@ Page Language="C#" AutoEventWireup="true" CodeBehind=& ...
随机推荐
- 搭建高可用mongodb集群（二）—— 副本集
在上一篇文章<搭建高可用MongoDB集群(一)--配置MongoDB> 提到了几个问题还没有解决. 主节点挂了能否自动切换连接?目前需要手工切换. 主节点的读写压力过大如何解决? 从节点 ...
- 安装 GraphicsMagick
yum -y install GraphicsMagick GraphicsMagick-devel 实际试了试,上面yum的方式不好使,下面是我实际安装过程: 1.下载最新版 wget ftp:// ...
- win10系统80端口被System （PID=4）占用的解决
今天想用wamp搭建虚拟目录.发现80端口被占用,操作挺麻烦的,所以想要更改. 具体流程如下: 1.“win+R”输入“cmd”,然后输入“netstat -ano | findstr "8 ...
- select server
server with select #include<stdio.h> #include<sys/types.h> #include<sys/socket.h> ...
- [翻译] BFKit
BFKit BFKit is a collection of useful classes to develop Apps faster. BFKit是一个有用的工具集合,帮助你快速开发. Insta ...
- Java学习---InetAddress类的学习
基础知识 1．InetAddress类 在网络API套接字,InetAddress类和它的子类型对象使用域名DNS系统,处理主机名到主机IPv4或IPv6地址的转换.如图1-1所示. 由于InetAd ...
- Java实例---简单的宠物管理系统
代码分析 Cat.java package com.ftl.petshop; class Cat implements Pet { private String name; private Strin ...
- cmd命令提示符大全（干货）
cmd是command的缩写.即命令提示符(CMD),是在OS / 2 , Windows CE与Windows NT平台为基础的操作系统(包括Windows 2000和XP中, Vista中,和Se ...
- ZT 打工者买彩票中1000万 5年后变逃犯身上剩80元
打工者买彩票中1000万 5年后变逃犯身上剩80元 2014-01-07 08:22 来源:都市快报 我有话说 挥霍—— 从800万到80元 在湖南永州零陵区富家桥镇茶叶湾村,陈某是不折不扣的名人 ...
- POJ 2528 Mayor's poster
主要是参考了这个博客 地址戳这儿 题目大意:n(n<=10000) 个人依次贴海报,给出每张海报所贴的范围li,ri(1<=li<=ri<=10000000) .求出最后还能看 ...