`

jQuery置顶特效,直接引用即可

阅读更多



window.onload = function() {
	demoload();
};

var demoload = function() {
	// document.getElementById("datehour").style.display="none";

	var scrolltotop = {
		// startline: Integer. Number of pixels from top of doc scrollbar is
		// scrolled before showing control
		// scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to
		// scroll document up when control is clicked on (0=top).
		setting : {
			startline : 100,
			scrollto : 0,
			scrollduration : 1000,
			fadeduration : [500, 100]
		},
		controlHTML : '<img src="images/top.gif" style="width:53px;height:53px" />', // HTML
		// for
		// control,
		// which
		// is
		// auto
		// wrapped
		// in
		// DIV
		// w/
		// ID="topcontrol"
		controlattrs : {
			offsetx : 5,
			offsety : 0
		}, // offset of control relative to right/ bottom of window corner
		anchorkeyword : '#top', // Enter href value of HTML anchors on the page
		// that should also act as "Scroll Up" links
		state : {
			isvisible : false,
			shouldvisible : false
		},

		scrollup : function() {
			if (!this.cssfixedsupport) // if control is positioned using
				// JavaScript
				this.$control.css({
							opacity : 0
						}) // hide control immediately after clicking it
			var dest = isNaN(this.setting.scrollto)
					? this.setting.scrollto
					: parseInt(this.setting.scrollto)
			if (typeof dest == "string" && jQuery('#' + dest).length == 1) // check
				// element
				// set
				// by
				// string
				// exists
				dest = jQuery('#' + dest).offset().top
			else
				dest = 0
			this.$body.animate({
						scrollTop : dest
					}, this.setting.scrollduration);
		},

		keepfixed : function() {
			var $window = jQuery(window)
			var controlx = $window.scrollLeft() + $window.width()
					- this.$control.width() - this.controlattrs.offsetx
			var controly = $window.scrollTop() + $window.height()
					- this.$control.height() - this.controlattrs.offsety
			this.$control.css({
						left : controlx + 'px',
						top : controly + 'px'
					})
		},

		togglecontrol : function() {
			var scrolltop = jQuery(window).scrollTop()
			if (!this.cssfixedsupport)
				this.keepfixed()
			this.state.shouldvisible = (scrolltop >= this.setting.startline)
					? true
					: false
			if (this.state.shouldvisible && !this.state.isvisible) {
				this.$control.stop().animate({
							opacity : 1
						}, this.setting.fadeduration[0])
				this.state.isvisible = true
			} else if (this.state.shouldvisible == false
					&& this.state.isvisible) {
				this.$control.stop().animate({
							opacity : 0
						}, this.setting.fadeduration[1])
				this.state.isvisible = false
			}
		},

		init : function() {
			jQuery(document).ready(function($) {
				var mainobj = scrolltotop
				var iebrws = document.all
				mainobj.cssfixedsupport = !iebrws || iebrws
						&& document.compatMode == "CSS1Compat"
						&& window.XMLHttpRequest // not IE or IE7+ browsers
				// in standards mode
				mainobj.$body = (window.opera)
						? (document.compatMode == "CSS1Compat"
								? $('html')
								: $('body'))
						: $('html,body')
				mainobj.$control = $('<div id="topcontrol">'
						+ mainobj.controlHTML + '</div>').css({
							position : mainobj.cssfixedsupport
									? 'fixed'
									: 'absolute',
							bottom : mainobj.controlattrs.offsety,
							right : mainobj.controlattrs.offsetx,
							opacity : 0,
							cursor : 'pointer'
						}).attr({
							title : '返回顶部'
						}).click(function() {
							mainobj.scrollup();
							return false
						}).appendTo('body')
				if (document.all && !window.XMLHttpRequest
						&& mainobj.$control.text() != '') // loose check for
					// IE6 and below,
					// plus whether
					// control contains
					// any text
					mainobj.$control.css({
								width : mainobj.$control.width()
							}) // IE6- seems to require an explicit width on a
				// DIV containing text
				mainobj.togglecontrol()
				$('a[href="' + mainobj.anchorkeyword + '"]').click(function() {
							mainobj.scrollup()
							return false
						})
				$(window).bind('scroll resize', function(e) {
							mainobj.togglecontrol()
						})
			})
		}
	}
	scrolltotop.init()

}
  • 大小: 1.7 KB
  • 大小: 3.9 KB
分享到:
评论

相关推荐

    前端+jQuery+实现烟花特效

    前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+...

    jquery大量特效demo

    jquery大量特效demo jquery大量特效demo jquery大量特效demo jquery大量特效demo jquery大量特效demo jquery大量特效demo jquery大量特效demo

    JavaScript+jQuery网页特效设计任务驱动教程-PPT.zip

    JavaScript和jQuery是网页开发中的两种重要工具,它们在创建交互式和动态网页特效方面发挥着核心作用。本教程以任务驱动的方式,旨在帮助学习者掌握这两门技术的基础知识以及实现各种网页特效的方法。 首先,...

    jquery特效圣诞雪花

    【jQuery特效圣诞雪花】 在网页设计中,动态效果可以增加用户体验,使页面更加生动有趣。"jQuery特效圣诞雪花"就是一个典型的例子,它利用jQuery库来实现一种节日氛围的动画效果,让网页背景飘落雪花,营造出冬日...

    jQuery单击列表项元素置顶特效

    jQuery单击列表项元素置顶特效,里面有两个类似的特效,代码非常精简,本人自己写的哈哈,一个是被单击的项置顶,其它的元素都向下移动,另一个是被单击的项置顶,之前第一个元素的位置与被单击的元素互换,哈哈,很...

    星空火箭置顶jQuery特效 超可爱的星空火箭置顶jQuery特效.zip

    《星空火箭置顶jQuery特效:打造梦幻前端交互体验》 在网页设计中,吸引用户的注意力并提供独特的用户体验是至关重要的。"星空火箭置顶jQuery特效"是一个创新的前端设计元素,它巧妙地融合了HTML5、CSS3以及...

    jquery图片特效,很美

    7. demo.zip:通常,"demo"文件包含了所有这些效果的实际示例或演示,让用户可以直接在浏览器中查看和测试这些jQuery图片特效。 这些jQuery图片特效的实现,不仅展示了JavaScript和jQuery的强大功能,还体现了前端...

    【Jquery经典特效2】jQuery个人简介特效页面代码

    【jQuery经典特效2】——jQuery个人简介特效页面代码 jQuery是一个高效、简洁且功能丰富的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。本篇文章将深入探讨如何利用jQuery...

    38个jquery经典特效

    38个jquery经典特效,适合用于美化网页效果;包括tab,menu,弹出提示框,蒙层效果,图片显示效果shadowbox,lightbox,表单验证等等,收集不易,上传共享

    jquery悬浮微信二维码微博分享置顶特效

    【jQuery悬浮微信二维码微博分享置顶特效】 在网页设计中,为了提高用户体验和社交媒体互动,开发者经常会在页面上实现各种动态效果,其中“悬浮”和“置顶特效”是常见的一种设计手法。此主题——“jQuery悬浮微信...

    【历时五年整理】jquery精美特效js特效收藏打包

    将这些特效打包在一起,使得开发者可以方便地查找和引用,避免重复造轮子。在实际项目中,开发者可以根据需求挑选合适的特效,通过简单的配置和调整,就能快速地融入到自己的网页设计中。这种方式极大地提高了开发...

    jquery插件特效WORD版

    资源名称:jquery插件特效 WORD版内容简介:本文档主要讲述的是jquery插件特效;jQuery 是继 prototype 之后又一个优秀的 Javascript 框架。其宗旨是—写更少的代码,做更多的事情。jQuery 是一个快速的,简洁...

    jQuery超酷弹出窗体特效,jQuery特效

    本文将深入探讨“jQuery超酷弹出窗体特效”,包括如何实现最大最小化、关闭收缩功能以及与CSS的结合使用。 首先,jQuery的弹出窗体特效通常涉及到创建一个可浮动的对话框或模态窗口,这些窗口可以用于显示信息、...

    8种jquery表单特效.zip

    8. **拖放上传(Drag and Drop Upload)**:jQuery支持拖放功能,可以让用户直接从桌面拖动文件到表单中进行上传,提供了更直观的文件上传方式。 这些特效都是通过jQuery库以及可能的jQuery插件实现的,它们提升了...

    web前端jquery特效巨集合

    "web前端jquery特效巨集合"这一资源集合,为学习者提供了一个全面的jQuery特效实践平台,包括101个精心设计的jQuery特效以及《锋利的jQuery》电子书和源码,旨在帮助开发者快速提升jQuery应用能力。 首先,jQuery的...

    jQuery阅读进度条导航置顶特效.zip

    标题中的"jQuery阅读进度条导航置顶特效.zip"指出,这个压缩包包含了一个使用jQuery实现的阅读进度条导航,并且该导航在页面滚动时会保持在顶部,这通常被称为“固定顶栏”或“粘性导航”。jQuery是一个广泛使用的...

    jquery脚本特效

    在这个"jquery脚本特效"的压缩包中,我们可以看到一系列与jQuery特效相关的资源。 首先,`index.html`和`about.html`是两个HTML文件,它们很可能是包含了使用jQuery实现的页面效果的示例。在`index.html`中,开发者...

    js特效和jquery特效(-)

    js特效和jquery特效

    红色喜庆jquery抽奖网页特效.rar

    红色喜庆jquery抽奖网页特效.rar 红色喜庆jquery抽奖网页特效.rar 红色喜庆jquery抽奖网页特效.rar 红色喜庆jquery抽奖网页特效.rar 红色喜庆jquery抽奖网页特效.rar 红色喜庆jquery抽奖网页特效.rar 红色喜庆jquery...

    五种jQuery鼠标移动点击特效 雪花 气泡 蝙蝠 表情 星星

    五种jQuery鼠标移动点击特效 雪花 气泡 蝙蝠 表情 星星 五种jQuery鼠标移动点击特效 雪花 气泡 蝙蝠 表情 星星 五种jQuery鼠标移动点击特效 雪花 气泡 蝙蝠 表情 星星 五种jQuery鼠标移动点击特效 雪花 气泡 蝙蝠 ...

Global site tag (gtag.js) - Google Analytics