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=& ...
随机推荐
- JAVA后台框架优化之日志篇
1.日志规范 各业务系统日志需要统一,以方便查看.收集日志, 日后统一ELK日志管理,以下为项目的日志配置, 这是兼容当前系统的日志,以后推行微服架构时会有变动,但日志存放方式不会改变,日后会推行sp ...
- 1 年经验 Java 求职面试题
从 17 年的大三暑假就在这家公司实习转正,在这家公司呆了快2年了,随着公司新一轮的融资,看起来公司离上市更近了一步,但期权池也进一步稀释,没有期权的我感觉回报更少了,另外在这家公司接触到的东西也有瓶 ...
- 学习笔记：Nginx反射代理使用缓存和删除其缓存文件的方法
使用nginx做cache服务器 需求就是缓存android的软件包,后缀名是apk.话不多说,直接上配置,供参考: a-->nginx.conf user www www; worker_pr ...
- 配置Sharepoint之后。外网无法访问的问题
Sharepoint配置完成了,projectserver也已经配置完毕.突然遇到一个情况就是外网访问不了,这可麻烦了,费了半天事访问不了等于0啊.没办法,研究吧.在群里问了大神,终于解决了.现将解决 ...
- [翻译] WZFlashButton
WZFlashButton This is a custom button with flash-like effect. Inspired by Ripple Effect. 这是一个自定义的按钮, ...
- Python学习---抽屉框架分析[小评论分析]0315
注: 此处的小评论涉及数据库操作 初级小评论代码 settings.py INSTALLED_APPS = [ ... 'app01', # 注册app ] STATICFILES_DIRS = (o ...
- 搭建spring boot+elasticsearch+activemq服务
目前时间是:2017-01-24 本文不涉及activemq的安装 需求 activemq实时传递数据至服务 elasticsearch做索引 对外开放查询接口 完成全文检索 环境 jdk:1.8 s ...
- ajax post data 获取不到数据
ajax post data 获取不到数据,注意 content-type的设置 .post/get关于 jQuery data 传递数据.网上各种获取不到数据,乱码之类的.好吧今天我也遇到了,网 ...
- [COGS 0407][NOIP 2009] 靶形数独
407. [NOIP2009] 靶形数独 ★★ 输入文件:sudoku.in 输出文件:sudoku.out 简单对比时间限制:5 s 内存限制:128 MB [问题描述] 小城和小华 ...
- Java自学之路(新手一定要看）
Java自学之路(新手一定要看) 转自尚学堂 JAVA自学之路 一:学会选择 为了就业,不少同学参加各种各样的培训. 决心做软件的,大多数人选的是java,或是.net,也有一些选择了手机.嵌入式.游 ...