【用jquery实现小火箭到页面顶部的效果】的更多相关文章

用jquery实现小火箭到页面顶部的效果

恩,不知道之前在哪看过一个页面效果就是如果页面被滑动了就出现一个小火箭,点击这个小火箭就可以慢慢回到页面顶部,闲的没事,自己搞了一下 需要引入jquery 代码和布局都很简单 <!DOCTYPE HTML> <html> <head> <style> #content{ height: 2000px ; width: 960px ; margin: 0 auto ; background-color: blue ; } #rocket{ width: 50p…

JS实现回到页面顶部动画效果 2016.03.23

最近在模仿各大网站写页面样式和交互,发现好多都有回到顶部的需要,所以写了一下js,记录下来. 发现还可以添加从快到慢的动画效果和随时下拉滚动条停止滚动的功能, 参考了imooc上相关课程,最终实现JS代码如下: //页面加载后触发 window.onload = function(){ var btn = document.getElementById('btn'); var timer = null; var isTop = true; //获取页面可视区高度 var clientHeight…

jquery实现点击上移到顶部功能(转)

---恢复内容开始--- 本文转载自W3CPLUS, jQuery制作go to top按钮 每每看到网友Blog的页面底部或中间有一个按钮回到页面顶部,羡慕死人了,但自己就是做不出这样的效果.后来在google和baidu搜寻了一下,仔细思考,并不像当初想象的那么复杂.经过整理贴到blog中与大家一起分享一下. 我们先来看看效果图吧: 这个效果是"点我加到页面顶部"按钮在页面底部,当然还有一种效果就是这个按钮在页面中间,我就不在示例了.这也是最简单的效果,还有一种效果就是页面一开始不…

Android简易实战教程--第十话《模仿腾讯手机助手小火箭发射详解》

之前对系统自带的土司的源码做了简要分析,见博客:点击打开链接 这一篇给一个小案例,自定义土司,模拟腾讯卫士的小火箭发射.如果想要迅速看懂代码,建议先去看一下上篇介绍点击打开链接 首先,定义一个服务,在这个服务里面,完成土司的创建(小火箭布局创建) 烟的效果属于动画播放,而且要依托一个activity.(这个activity要定义为透明状态) 定义烟的activity的布局文件 <?xml version="1.0" encoding="utf-8"?>…

jQuery判断元素离页面顶部的高度

<script language="javascript" type="text/javascript"> jQuery(document).ready(function () { // $(window).height() // alert($("#linkmsg").height()); // alert($(document).scrollTop()); // jQuery(window).scroll(function ()…

jquery获取元素到页面顶部距离

jquery获取元素到页面顶部距离的语句为: $(selector).offset().top…

jQuery中获取文档的高度、可视区域高度以及滚动条距页面顶部的高度

在写页面的时候,经常会碰到这样的情况,就是要获取文档的高度.可视区域高度或者滚动条距页面顶部的高度等情况. 但我总是有些爱搞混淆了,这里还是简单做个笔记吧,这里只限于使用jQuery来获取. 1.获取文档的高度. 使用 $(document).height()   代表了整个文档的高度 2.获取文档可视区域高度. 使用 $(window).height()   代表了当前可见区域的高度 3.获取当前滚动条距离文档顶部的高度,注意是文档顶部高度,不是窗口的高度. 使用 $(document).sc…

jquery实现返回页面顶部功能。

<p id="back-to-top"> <span></span> </p> <script type="text/javascript"> $(function() { //首先将#back-to-top隐藏 $("#back-to-top").hide(); //当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失 $(function() { $(window).sc…

代码： 返回页面顶部 jquery

jquery代码: 返回页面顶部 <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $(".go-top").click(function () { $(d…

【jQuery】页面顶部显示的进度条效果

<!Doctype html> <html> <head> <title>页面顶部显示的进度条效果</title> <meta http-equiv=Content-Type content="text/html;charset=utf-8"> </head> <body> <div id="web_loading"><div></div&g…