`
dh189
  • 浏览: 135921 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类
最新评论

jquery 回到顶部插件

阅读更多

//** jQuery Scroll to Top Control script- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com.
//** Available/ usage terms at http://www.dynamicdrive.com (March 30th, 09')
//** v1.1 (April 7th, 09'):
//** 1) Adds ability to scroll to an absolute position (from top of page) or specific element on the page instead.
//** 2) Fixes scroll animation not working in Opera. 


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:1, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
	controlHTML: '回到顶部', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
	controlattrs: {offsetx:5, offsety:5}, //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:'Scroll Back to Top'})
				.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()
 
分享到:
评论

相关推荐

    jquery回到顶部插件jquery.goup.js

    返回顶部插件广泛应用于长篇博客、电商详情页、文档阅读等场景,能有效提升用户体验。jquery.goup.js的优点在于简洁易用,兼容性好,但缺点可能在于功能相对简单,对于有特殊需求的项目,可能需要额外的定制工作。 ...

    jQuery回到顶部插件GoUp.rar

    《jQuery回到顶部插件GoUp:前端开发中的经典动画效果》 在网页设计与开发中,用户界面的交互性是提升用户体验的关键因素之一。"jQuery回到顶部插件GoUp"是一个典型的JavaScript特效,旨在帮助用户方便地返回页面...

    jQuery回到顶部插件scrollToTop.zip

    总的来说,"jQuery回到顶部插件scrollToTop"是一个提高网页用户体验的优秀工具,通过jQuery的便利性和强大的功能,实现了平滑且响应式的返回顶部功能。它不仅简化了开发者的工作,也为用户带来了更为舒适的浏览体验...

    jQuery回到顶部插件GoUp.zip

    3. **自定义样式**:GoUp 插件允许开发者通过CSS对返回顶部按钮进行样式定制,以适应网站的整体设计风格。你可以改变按钮的大小、颜色、形状以及位置等。 4. **兼容性**:作为一款成熟的jQuery插件,GoUp 具有良好...

    jquery回到顶部插件GoUP.zip

    "jquery回到顶部插件GoUP.zip" 提供了一个实用的功能,帮助用户在浏览长页面时轻松返回页面顶部,提高用户体验。这个插件尤其适用于那些包含大量内容或滚动条较长的网站。 GoUP 插件的核心特性在于其强大的兼容性,...

    jQuery回到顶部插件jQueryGoUp

    jQuery GoUp!是一个简单的jQuery插件,让你的网页用户直接回到顶部。 使用方法非常简单 引用jquery库和jquery.goup.min.js到你的页面 ... title: '返回顶部', titleAsText: true //是否显示title }); });

    jQuery回到顶部插件jQuery GoUp

    在网页设计中,特别是内容丰富的长页面,为用户提供便捷的“返回顶部”功能显得尤为重要。这不仅可以提升用户体验,也可以帮助用户快速导航到页面的起始位置。`jQuery GoUp`就是一个这样的插件,它利用jQuery库的...

    jQuery超实用返回顶部插件

    **jQuery返回顶部插件详解** 在网页设计中,随着内容的增多,用户在浏览页面时可能会需要滚动很长的距离。为了方便用户快速返回页面顶部,许多网站都采用了“返回顶部”功能。今天我们要讨论的是一款基于jQuery的超...

    jQuery回到顶部插件scrollToTop特效代码

    在网页设计中,用户体验是至关重要的,而"jQuery回到顶部插件scrollToTop特效代码"就是一种提升用户体验的优秀工具。这个插件是基于广泛使用的JavaScript库jQuery开发的,其目的是在用户滚动页面时提供一个方便快捷...

    jquery返回顶部插件

    "jQuery 返回顶部插件"是一个常见的网页交互元素,旨在提供用户友好的体验,帮助用户轻松地将浏览焦点返回页面顶部。这种插件尤其在长页面中十分实用,减少了用户滚动鼠标回到顶部的麻烦。 使用 jQuery 返回顶部...

    jquery做的返回顶部插件

    "jQuery做的返回顶部插件"正如其标题所示,是一个基于JavaScript库jQuery实现的,旨在帮助用户轻松地回到页面顶部的工具。这个插件简化了开发者实现这一功能的复杂性,使得网页更加友好和互动。 首先,我们来理解...

    jquery回到顶部插件GoUP特效代码

    "jquery回到顶部插件GoUP特效代码"是针对网页滚动时提供的一种用户体验优化工具,使得用户在浏览长页面时能够方便地返回页面顶部。这款插件具有极强的兼容性,可以适应多种浏览器环境,而且允许开发者根据自身需求...

    jquery回到顶部源代码

    标题中的“jquery回到顶部源代码”指的是一个使用jQuery库实现的网页滚动到顶部功能的代码。这个功能通常出现在页面滚动到底部时,提供一个按钮或链接,点击后可以使页面瞬间返回到顶部,方便用户浏览。在网页设计和...

    带CSS3动画效果的炫酷jquery返回顶部插件

    gototop是一款轻量级、简单易用的jquery返回顶部插件。该jquery返回顶部插件在用户向下滚动页面一段距离之后,会以CSS3动画方式出现返回顶部按钮。点击返回顶部按钮之后,页面以平滑的方式滚动回顶部。

    7款jQuery常用插件

    6. **jQuery回到顶部插件jQueryGoUp**:jQueryGoUp插件为网页添加一个返回顶部的按钮,当用户在长页面滚动时,这个按钮会出现在页面底部,点击即可瞬间返回页面顶部,提高了浏览的便利性。 这些插件的使用大大提升...

    jquery实现右侧显示分享类按钮及返回顶部按钮插件

    jquery实现右侧显示分享类按钮及返回顶部按钮插件

    jQuery返回定位插件详解

    其中,返回定位插件是前端开发中常用的一类插件,主要目的是帮助用户在长页面滚动到特定位置后能够快速返回顶部或者其他指定位置。 在了解jQuery返回定位插件之前,我们首先要了解jQuery为开发者提供的几种开发插件...

    jquery 插件 弹出层 回到顶部底部

    本文将详细探讨与“jquery 插件 弹出层 回到顶部底部”相关的知识点,帮助你理解和应用这些技术。 首先,jQuery插件是扩展jQuery功能的一种方式,它们通常包含一组预定义的函数,可以方便地添加到项目中以增强网站...

Global site tag (gtag.js) - Google Analytics