• 注册
热门标签
↑ 收起导航

自动显隐回到顶部javascript代码

当拖动网页滚动条的时,页面右下角会自动出现“回到顶部”的图标,点击该图标就可以回到顶部!此代码原理是当页面到达非第一屏时,即显示TOP图标,点击后页面平滑滚动到第一屏!效果很爽!

自动显隐回到顶部代码

将如下内容直接保存为 scrolltopcontrol.js ,直接在页面调用即可,代码中的 up.png 图片为向上箭头,可自己替换。

//** jQuery Scroll to Top Control script- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com.

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="up.png" style="width:24px; height:24px" />', //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()
版权声明:转载请注明来自杨俊伟博客,本文地址:http://yangjunwei.com/a/467.html
除非注明,杨俊伟博客文章均为原创,转载请注明出处和链接!
 

18 条评论 »

  • glaucoma eye drops
    2011/06/26 18:16:50

    Thanks on your marvelous posting! I genuinely enjoyed reading it, you can be a great author.I will remember to bookmark your blog and definitely will come back down the road. I want to encourage one to continue your great posts, have a nice evening!

  • Ellis Whelehan
    2011/02/24 05:06:14

    I was recommended this website by my cousin. I'm not sure whether this post is written by him as no one else know such detailed about my difficulty. You are incredible! Thanks!

  • Jeanette
    2011/01/29 07:45:36

    I was searching the internet looking at some stuff and stummbled accross your site. I wanted to let you know that I think your site has some good pages and that I have already bookmarked this page so I can visit again soon good job!

  • godaddy
    2011/01/21 21:57:54

    这个不错!

  • lenen
    2011/01/20 03:36:20

    kkqkvbakaaqnlcmehiflgscgecgbjbqc

  • weddingdresses
    2010/10/20 16:13:14

    呵呵最后谢谢博主

  • weddingdress
    2010/10/20 16:12:32

    呵呵 很喜欢这个代码功能

  • nikeforce
    2010/09/26 17:48:09

    谢谢楼主的分享,我也用用呢

  • uggbootsonsale
    2010/09/20 12:43:31

    博主你太好了 我也下载个!

  • uggboots
    2010/09/01 14:47:00

    有了这个就方便多了!

    nuodou 于 2010-9-2 11:10:37 回复

    大家方便才是真的方便

  • 这个小代码功能感觉很人性化,值得推荐

  • 画英雄
    2010/08/12 13:19:22

    用360浏览器会被当成网页广告过滤掉。这个比较麻烦!

    nuodou 于 2010-8-13 9:42:45 回复

    我这边默认设置是可以显示的!你是不是手动设置高拦截啊?

  • 雨像眼泪
    2010/08/07 23:39:38

    看见你恢复我也很高兴,默默支持你

    nuodou 于 2010-8-11 10:15:08 回复

    多谢哥们支持

  • diyidu
    2010/08/06 12:51:39

    你这博客是什么程序内核?感觉怪怪的。这个不错,下载收藏。

    nuodou 于 2010-8-6 12:53:26 回复

    哈哈!怎么怪了?

  • 土狼妹妹
    2010/08/05 21:35:02

    这个功能可以试试,不错

  • 飞晏
    2010/08/03 18:42:09

    回来了~~ 开始更新了!!

    nuodou 于 2010-8-4 9:45:02 回复

    是啊!心情慢慢恢复!失去亲人的伤真的很痛啊!

  • 那个放大镜非常的不错啊!
    谢谢,博主分享!

    nuodou 于 2010-8-4 9:46:16 回复

    愿生意兴隆!哈哈!

  • 减肥药排行榜
    2010/08/03 18:18:15

    沙发,
    谢谢,博主分享。
    这代码非常不错啊!

    nuodou 于 2010-8-4 9:46:42 回复

    自己代理的还是投放别人的?

发表评论 



我还是想用邮箱注册

登录

忘记密码 ?

用第三方帐号快捷登录

已有账户?前往登录吧~

注册