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=& ...
随机推荐
- 最好的原型和流程图绘制工具：OmniGraffle_交互设计
原文地址:http://www.shangxueba.com/jingyan/2230668.html 使用哪种原型设计工具"大概是设计师闲聊时出现频率最高的话题之一.据我了解一般以Visi ...
- 使用@Value进行静态常量的值注入
@Component public class ExpressConstant { public static String URL; @Value("${express.url}" ...
- 关于VSTS自动Build报错问题之Microsoft.Net.Compilers
报错内容如下: --06T11::.6035712Z ##[error]Dotnet command failed with non-zero exit code on the following p ...
- python 装饰器的详细理解【多次实验】
demo: # 装饰器其实就是对闭包的使用 print('haha嘻嘻') def hot(): print('知道') def dec(fun): print("call dec" ...
- python面向对象编程（2）—— 实例属性，类属性，类方法，静态方法
1 实例属性和类属性 类和实例都是名字空间,类是类属性的名字空间,实例则是实例属性的名字空间. 类属性可通过类或实例来访问.只有通过类名访问时,才能修改类属性的值. 例外的一种情况是,当类属性是一个 ...
- Python实例---抽屉后台框架分析
1.1. 抽屉框架分析 --登陆注册分析 1.2. 前台获取form表单补充知识: <!DOCTYPE html> <html lang="en"> < ...
- netstat 常用方法
netstat简介 netstat是一个监控TCP/IP网络的非常有用的工具,它可以显示路由表,实际的网络连接以及每一个网络接口设备的状态信息,netstat用于显示与IP,TCP,UDP和ICMP协 ...
- mongodb的安装和启动
1.在mongodb的官网上下载安装包 https://www.mongodb.com/download-center 选择对应你的系统的安装包下载 如果下载不了 可以使用这个链接下载http://d ...
- c++计算器后续（3）
自娱自乐: 本来只是想改改第二次的代码规范的,然后好像把原来的代码玩坏了,真是尴尬...然后大概是又发现了一些东西.以上. main的参数: 大概是说main函数的括号里是可以带参数的,写成这个样子: ...
- python将字符串转变成dict格式
字符串的内容是字典,需将字符串转变成字典格式 s1 = '{"lid":2,"date":"20190211","type&quo ...