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=& ...
随机推荐
- PHP计算近1年的所有月份
$z = date('Y-m'); $a = date('Y-m', strtotime('-12 months')); $begin = new DateTime($a); $end = new D ...
- 基于TCP/IP的程序设计
TCP特点 (1)面向连接的传输 (2)端到端的通信 (3)高可靠性,确保传输数据的正确性,不会出现丢失或者乱序 (4)全双工方式传输 (5)采用字节流方式,以字节为单位传输字节序列 (6)紧急数据传 ...
- Halo 的缔造者们在忙什么？
如果你自认为是一名主机游戏玩家,就一定知道 Halo.自 2001 年首代作品问世至今,十多年的磨炼已使得『光环』成为世界顶级的 FPS 游戏之一.<光环4>的推出,更让系列走向一个重要的 ...
- 在datagridview中添加button按钮
.Net的DataGridView控件中,提供了一种列的类型,叫 DataGridViewButtonColumn ,这种列类型是展示为一个 按钮,可以给button赋予相应的text,并且,此but ...
- 进程间通信——队列和管道（multiprocess.Queue、multiprocess.Pipe）
进程: 之前我们已经了解了操作系统中进程的概念,程序并不能单独运行,只有将程序装载到内存中,系统为它分配资源才能运行,而这种执行的程序就称之为进程.程序和进程的区别就在于:程序是指令的集合,它是进程运 ...
- VC listBox控件的方法
获取listBox里所有行数 GetCount(); 设置某行的选中状态 SetSel(index,true);第一个参数是行号,第二个参数是否选中
- Java学习---InetAddress类的学习
基础知识 1．InetAddress类 在网络API套接字,InetAddress类和它的子类型对象使用域名DNS系统,处理主机名到主机IPv4或IPv6地址的转换.如图1-1所示. 由于InetAd ...
- 【深入理解JAVA虚拟机】读后感
收获颇多的一本书,非常值得细细品味. 1.所谓万变不离其宗,此书便是宗.读过此书后,发现以前看过的网上好多五花八门的文章,都是源自此书. 2.举一反三.此书中讲到的jvm用到的各种思想,在工作中其实经 ...
- ZT 线程处理函数pthread_cleanup_push / pthread_cleanup_pop
http://bbs.csdn.net/topics/390688105 2)创建了线程,但是线程退出时没有线程调用pthread_join() 线程资源没有回收,如果持续创建线程,到一定数量后将不能 ...
- Programming Assignment 2: Seam Carving
编程作业二 作业链接:Seam Carving & Checklist 我的代码:SeamCarver.java 问题简介 接缝裁剪(Seam carving),是一个可以针对照片内容做正确缩 ...