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=& ...
随机推荐
- QQ群文件下载速度慢-解决办法
QQ群文件下载速度慢-解决办法 本方法是本人亲测测试出来的,特此和大家分享 没有效果让你打我 解决方法 1.打开[手机版 QQ] 2.进入群文件,找到需要下载文件 3.[分享],先点击[发给好友],选 ...
- 解决Spring框架下中文乱码的问题
在使用了Spring框架下回发现很多表单交互的地方会发生乱码,而且写到数据库中也是乱码,这其实还是字符编码的问题,在我们还在用自己写的servlet的时候,直接在request和response加上字 ...
- 使用自定义视图的AlertDialog
使用自定义视图的AlertDialog主要分为以下几个步骤: 1)利用XML文件构建自己的的视图 2)将视图添加到AlertDialog中 * 在进行第二步之前,有时需要对对话框窗口进行额外的设置 下 ...
- Software Testing Techniques Homework 2
Problem 1 1. The fault is i > 0, it should be i >= 0, because if the case is x = [0], y= 0, w ...
- js构建类的方法
Javascript是一种基于对象的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有Class.(不过,ES6引入了Class这个概念,作为对 ...
- 【SQL server 2012】复制数据库到另一台机器上
当需要将一台机器(源机器)上的一个数据库完全复制到另一台机器(目标机器)上时,可以选择先在源机器上备份该数据库,然后在目标机器上还原该备份的方法. 下面详细描述具体步骤: 1. 打开SQL serve ...
- Java实例---简单的超市管理系统
代码分析 Customer.java package test; public class Customer { private String name; private int customerTy ...
- 【Oozie】ambari安装oozie失败
之前对azkaban的研究比较多,现在开个新坑,对Oozie开始深入了解 Traceback (most recent call last): File "/var/lib/ambari-a ...
- August 18th 2017 Week 33rd Friday
If you shed tears when you miss the sun, you also miss the stars. 如果你因为错过太阳而哭泣,你也将会错过繁星. If you have ...
- August 02nd 2017 Week 31st Wednesday
Love means never having to say you are sorry. 爱就是永远不必说对不起. If there is ture love, you will never do ...