jq返回顶部

今天发工资了,哎,更加坚定我要努力的学习,没资本,只能玩技术了。人呢,想的的开,才行,虽然有些不甘心,不过确实,现在的技术只值这个

价格。不过做到问心无愧就够了,不然人之贪婪,真的收也收不回。好了,今天的回顶部,不是以往的,锚点到顶部,而是用js来控制,d第一个关键呢,就

是scrollTop=0;事件对象呢,是 body和html,第二个呢,就是到顶部之后呢,隐藏。判断条件就是 $(window).height == $(window).height().

好了直接上例子(注意右下角)

<script type="text/javascript">
			$(function(){
				$("#top").on("click",function(){/*這裡用on jquery版本要在1.7以上*/
					onStart();/*鼠標點擊執行onStart()函數*/
				})
				function onStart(){
					$("body,html").animate({/*scrollTop對象一般都是body和html*/
						"scrollTop":0
					},300)
				}
				$(window).on("scroll",function(){/*scroll時間,鼠標滑動事件*/
					if($(window).scrollTop()> $(window).height())/*scroll判斷對象事件一般都是window*/
					{
						$("#top").fadeIn();
					}
					else{
						$("#top").fadeOut();
					}
				})
				$(window).trigger("scroll",function(){/*trigger頁面更新事件  刷新完页面一开始不要让其显示*/
					    $("#top").fadeOut();
				})
			})
		</script>

  

时间: 2024-10-02 01:40:34

jq返回顶部的相关文章

jq返回顶部多种实现方法

直接上代码,复制运行即可 基础版: 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>返回顶部</title> 6 <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></s

JQ 移动端返回顶部,往下滑动时显示返回按钮,往上滑动时隐藏返回按钮

returnTop:function(){ //预定义返回顶部的html代码,它的css样式默认为不显示 var gotoTop_html = '<div class="returnTop"></div>'; //将返回顶部的html代码插入页面上id为page的元素的末尾 $(".ding_C_returnTop").append(gotoTop_html); var windowTop=0;//初始话可视区域距离页面顶端的距离 $(doc

简单返回顶部代码

动态按需加载返回顶部,css侧边屏幕绝对定位,结合简单jQuery动画实现更好体验 /*默认样式,主要是position:fixed实现屏幕绝对定位,ie6不支持position:fixed效果*/ #gotoTop{/*返回顶部按钮的位置与样式*/ display:none; position:fixed; text-align:center;/*实现按钮内部字体的水平居中 */ top:75%;/*定位向上的位置*/ left:50%;/* 相对于水平向右移50% */ cursor:poi

扒皮下音悦台的“返回顶部”图标效果

昨晚想仿造下音悦台首页“返回顶部”的小超人效果,觉得这东西的实现很简单,应该不会费时超过一个钟.结果撸代码的过程发现存在很多意想不到的问题. 先发个图: 有兴趣的朋友可以去音悦台点一下这个小超人图标试一试,默认是隐藏的,滚动条下拉一小段距离后会从下面飞上来悬停在右下角,点击的时候不但浏览器滚动条会返回顶端,小超人也会往上飞到顶部消失掉. 不过我印象中,以前若鼠标移到图标上,小超人会变成一个动态(小超人的披风会摆动)的gif图,不过现在取消了这效果,可能是因为gif毕竟不是png,多少带有些锯齿影

js返回顶部小Demo

<style> .divH { height: 1800px; } .divT { width: 50px; height: 50px; font-size: 18px; background-color: #2F4F4F; text-align: center; color: white; position: fixed; right: 18px; bottom: 18px; } .divT:hover{ cursor: pointer; } .hide { display: none; }

返回顶部/底部3

<!DOCTYPE html> <html lang="en"> <head> <title>返回顶部/底部</title> <meta charset="UTF-8"> <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"

返回顶部和底部(动画)

<!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"> <head> <meta http-equiv="Content-

原生JS返回顶部,带返回效果

有些网站当滑到一定高度时右下角会有一个按钮,你只要一点就可以直接返回顶部了.那这个功能是怎么做到的呢.其实不算太难: 首先我们先在网页中创建一个按钮,上面写上返回顶部,把它的样式改成固定定位,之后想要什么样式都可以自己写上,再在上面设置一个id: 之后我们js中获取一下这个按钮的id,并且定义一个变量timer,方便接下来清除间隔器: 之后我们设置一个页面的滚动事件,在里面定义一个变量获取一下所滚动的高度: 再用一个判断语句来判断一下滚动的高度:我们在设置一个数来让按钮什么时候显示: var o

JavaScript之返回顶部

为了弄这个Hexo,今天又是坐在电脑面前待了一天( ⊙ o ⊙ ),老是出问题,在百度上也试验了很多方法,还是没弄好,诶...身心疲惫甚是乏累啊~~~ 算了,这个Hexo先不弄,还是安分点吧,在Hexo上感觉浪费了很多的时间,毕竟Hexo对我来说还是高大尚的东西,适可而止. 好了!我还是好好搞自己基础的东西吧,做自己该做的事就可以了. 我们回到这章话题,我们都知道都看到过,很多页面都会有“返回顶部”,方便快捷. 到页面底部 返回页面顶部