jQuery---小火箭返回顶部案例

小火箭返回顶部案例 1. 滚动页面,当页面距离顶部超出1000px,显示小火箭. 封装在scroll函数里,当前页面距离顶部为$(window).scrollTop >=1000 小火箭显示和隐藏用fadeIn和fadeOut //当页面超出1000px的时候,让小火箭显示,如果小于1000px,则隐藏 $(window).scroll(function () { if ($(window).scrollTop() >= 1000) { $(".actGotop").sto…

第50天：scrollTo小火箭返回顶部

scrollTo(x,y)//可把内容滚动到指定的坐标scrollTo(xpos,ypos)//x,y值必需 1.固定导航栏 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>固定导航栏</title> <script src="my.js" type="text/jav…

使用jQuery简单实现返回顶部的一个小案例

1.简单写一个页面首先我们应该创建两个盒子,container盒子主要模拟页面滚动到的位置,back盒子主要功能是实现返回顶部的功能 2.简单的对这两个盒子写一些样式我们应该先将返回顶部盒子隐藏(display:none) 我们可以看到页面是这个样子 3.使用jQuery简单写返回顶部的js 最终实现返回顶部的功能…

JS——BOM操作（点击按钮返回顶部案例：scrollTop的用法）

点击按钮返回顶部案例: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Co…

jQuery中页面返回顶部的方法总结

当页面过长时,通常会在页面下方有一个返回顶部的button,总结一下,大概三种实现方法,下面说下各方法及优缺点. 方法一锚点定位 ? 1 <a href="#" class="top" id="top">返回頂部</a> 这种方法设置方便,但缺点是会刷新页面(我是在同事的乐视手机上发现的). 方法二 window.scrollTo(x,y) ? 1 <a href="javascript:scrollTo…

编写jQuery插件--实现返回顶部插件

国庆过去一周多了,作为IT界的具有严重’工作狂‘性质的宅人,居然还没走出玩耍的心情,拖了程序猿的脚后跟了.最近工作不顺,心情不佳,想吐槽下公司,想了还是厚道点,以彼之道还施彼身,觉得自己也和他们同流合污了!就做个‘沉默’的程序猿吧!(总有一天会猿球崛起)嘿嘿. 牢骚到底为止,好的心情才是重要的,本来猝死的几率就那么大了,就不要再往上飙数字了.不快的心情留在公司,快乐的在家里写blog. 有一段时间没有写blog了(恍恍惚惚的过了这些天,买了几本书,看了,字全认识,意思全没看进去),也没有一个清晰…

javascript 缓动返回顶部案例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con…

小程序返回顶部top滚动

wxjs const app = getApp(); Page({ data:{ // top标签显示(默认不显示) backTopValue:false }, // 监听滚动条坐标 onPageScroll: function (e) { //console.log(e) var that = this var scrollTop = e.scrollTop ? true : false that.setData({ backTopValue: backTopValue }) }, // 滚动…

jQuery实现返回顶部

由于项目需要,写了个返回顶部的小功能... /*返回顶部*/ function toTop() { $(".to_top").hide(); $(window).scroll(function(){ var scroll_top = $(document).scrollTop(); if(scroll_top != 0){ $(".to_top").show(); }else{ $(".to_top").hide(); } }); $("…

jQuery返回顶部实用插件YesTop

只需一句jQuery代码实现返回顶部效果体验:http://hovertree.com/texiao/yestop/ 使用方法:只需引用jQuery库和YesTop插件(jquery.yestop.js),然后一句代码就可以实现返回顶部:引用代码:<script src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script> <script src="http://h…

Jquery返回顶部插件

自己jquery开发的返回顶部,当时只为了自己用一下,为了方便,修改成了插件... 自己的博客现在用的也是这个插件..使用方便!! <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></titl…

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

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

jQuery火箭图标返回顶部代码

在网上找来段使用jQuery火箭图标返回顶部代码,感觉比较酷,比较炫,大概样式如下, 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">…

JS 带运动的返回顶部小案例

带运动的返回顶部:当滚动条在滚动的时候,滚动鼠标的滚轮,应该让滚动条停止滚动,清掉定时器.下面的方法b 就是清掉的方法 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en">…

jQuery之标签操作和返回顶部、登录验证、全选反选、克隆示例

一.样式操作 1.JQ中的样式类 somenode.addClass();// 添加指定的CSS类名. somenode.removeClass();// 移除指定的CSS类名. somenode.hasClass();// 判断样式存不存在 somenode.toggleClass();// 切换CSS类名,如果有就移除,如果没有就添加. somenode.className 获取所有样式类名(字符串) somenode.classList 获取所有样式类名(数组) somenode.clas…

一句jQuery代码返回顶部

一句jQuery代码返回顶部效果体验: http://hovertree.com/texiao/yestop/ 使用方法: 只需引用jQuery库和YesTop插件,然后一句代码就可以实现返回顶部: 引用代码: <script type="text/javascript" src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script> <script ty…

jquery返回顶部，支持手机

jquery返回顶部,支持手机效果体验:http://hovertree.com/texiao/mobile/6/ 在pc上我们很容易就可以用scrollTop()来实现流程的向上滚动的返回到顶部的动画,然后用到web移动端却没什么卵用,会出现滚动不流畅,卡顿,失灵等等现象. 这是因为移动端的scroll事件触发不频繁,有可能检测不到有<=0的情况为此,移动端判断次数好些,下面是具体实现代码,兼容pc: <!DOCTYPE html> <html> <head>…

jQuery 一句代码返回顶部

兼容各大主流浏览器,jQuery返回顶部,一句代码搞定 <a class="top" href="javascript:;" style="position:fixed;bottom:20px;right:20px;">Back to top</a> <script> $('.top').click(function (e) { $('html, body').animate({scrollTop: 0}, 8…

转载：jQuery实现返回顶部功能

转自:http://blog.csdn.net/itmyhome1990/article/details/25340705 整理两个实现功能,一个是右下角的返回顶部,一个是右侧的返回顶部,分别如图第一种实现一.JSP或HTML(主体结构) 在body中添加 <body id="top"> <p id="back-to-top"><a href="#top"><span>…

js+JQuery实现返回顶部功能

很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a href="#top"><span></span>返回顶部</a></p> 其中a标签指向锚点top,可以在顶部防止一个<a name="top"></a>的锚点,这样在浏览器不支持js时也可…

jQuery返回顶部（精简版）

jQuery返回顶部(精简版) <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery返回顶部</title> <style> *body{ background-attachment: fixed; background-image: url(about:blank); /* 必须的,防抖…

使用jquery构建Metro style 返回顶部

个人一直对metro风格的东西情有独钟,偶然间在腾讯网看到一款小插件,蓝色Metro风格的,所以决定把它放到我的博客中,这样做应该不会有版权问题吧orz.. Complete code 后言我把他原来的相关阅读换成二维码了,由于本人前端技术捉襟见肘只能用人家写好的css,自己稍微改点,另外觉得可以不依赖jq,用纯生js实现这样也许会好点. GIF & Firefox 3D视图 ↑↑source code↑↑ 小清新风格今天没事又做了一款只有返回按钮的,在Edit fiddle预览中…

jQuery类级别插件--返回顶部，底部，去到任何部位

先引入js:<script type="text/javascript" src="jquery.js" ></script><script type="text/javascript" src="towhere.js" ></script> 假设页面: <body> <a href="javascript:;" id="to-bo…

DIY 博客全文界面的推荐、反对、加关注、返回顶部、快速评论等小功能的集成

博客园已经很不错了,但作为比较“挑剔”的用户,在使用的过程中,还是有一些地方不爽的. 我不是一个专业的前台程序员,也只能凭借自己蹩脚的JS和CSS知识完成对页面的小改造(专业的大虾莫要鄙视呀..). 这里给大家分享出来,博大家一笑.觉得有用的可以直接拿去.(本来也没啥技术含量的) 先说说我不习惯的部分: 1.在大概扫一眼别人写的博客的时候,我就有“推荐”或者“反对”冲动,可是,两个按钮在哪儿呢? 在正文的最底部,我还得拉到最底部才能完成对一篇文章的“批判”. 2.一般比较负责任的博客(篇幅比较小…

jquery右下角返回顶部

实现的效果也就是,当有滚动条是,滚动条未动或与顶部距离小于多少像素是,返回顶部按钮处于隐身状态,当滚动条与顶部距离大于一定像素时,返回顶部按钮出现,实现点击‘返回按钮’后,从当前位置回到等不位置.要先引用jquery.min.js <script src="__PUBLIC__/js/jquery-2.1.4.min.js"></script> html: <div id="back-to-top" style="displa…

简约的返回顶部效果（jQuery）

博客建好也快一个月了,主题是在原有主题的基础上做的修改,喜欢这样的清新简约风格,为了更好的体验,以后也会经常做修改. 一般博客的文章都比较长,看到下面不能快速返回到顶部还真是不方便,今天自己动手写了一个,是基于 jQuery 的,用起来还不错. 常见的“返回顶部”分这么3种:把返回顶部按钮放在页面最底部的,返回顶部按钮在滚动距离大于一定的距离后显示出来的,还有就是滚动距离大于 0 的时候就显示出来,喜欢最后这种,嗯,就它了~ 做好了贴出来共享下:) HTML: 用两个 span 标签去模拟一个向…

添加“返回顶部”小图标按钮的JS(JavaScript)代码详解

如何给自己的网站添加方便快捷的"返回顶部"小图标按钮呢?如下图: JS源代码: /** * JavaScript脚本实现回到页面顶部示例 * @param acceleration 速度 * @param stime 时间间隔 (毫秒) **/ function gotoTop(acceleration,stime) { acceleration = acceleration || 0.1; stime = stime || 10; var x1 = 0; var y1 = 0; va…

JQuery 实现返回顶部效果

首先要里了解一下几个知识 $(window).scrollTop() ---滚动条距顶部距离 fadeIn() 方法使用淡入效果来显示被选元素,假如该元素是隐藏的. fadeOut() 方法使用淡出效果来隐藏被选元素,假如该元素是隐藏的. 该方法通过CSS样式将元素从一个状态改变为另一个状态.CSS属性值是逐渐改变的,这样就可以创建动画效果.详细可参考:http://www.w3school.com.cn/jquery/effect_animate.asp <%@ Page Language=&qu…

jQuery实现返回顶部功能

整理两个实现功能,一个是右下角的返回顶部,一个是右侧的返回顶部,分别如图第一种实现一.JSP或HTML(主体结构) 在body中添加 <body id="top"> <p id="back-to-top"><a href="#top"><span></span></a></p> </body> 二.CSS(样式化) &l…

微信小程序ios点击状态栏返回顶部不好使

最近做了一款微信小程序,各方面感觉都很完美(萝卜一直这么自信),今天设计总监告诉我你的小程序怎么返回顶部不好使呀,吓得我赶紧拿手机试试,没毛病啊,我手机(苦逼的安卓机)上点两下就回去了呀,遂去找他理论,设计总监拿他手机(高大上的苹果机)当场演示,才恍然,这是又入了大苹果的坑... 啊,说这么多废话好累! 如果发现你的小程序在scorll-view设置了enable-back-to-top为true,在安卓上返回顶部好使,ios上点击状态栏返回顶部不好使,如下图操作即可.…

【jQuery---小火箭返回顶部案例】的更多相关文章