自动显隐回到顶部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()

参与评论

  • glaucoma eye drops

    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!

    12年前 (2011-06-26)
    回复
  • Ellis Whelehan

    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!

    12年前 (2011-02-23)
    回复
  • Jeanette

    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!

    13年前 (2011-01-28)
    回复
    回复Jeanette
  • godaddy

    这个不错!

    13年前 (2011-01-21)
    回复
    回复godaddy
  • lenen

    kkqkvbakaaqnlcmehiflgscgecgbjbqc

    13年前 (2011-01-19)
    回复
    回复lenen
  • weddingdresses

    呵呵最后谢谢博主

    13年前 (2010-10-20)
    回复
  • weddingdress

    呵呵 很喜欢这个代码功能

    13年前 (2010-10-20)
    回复
    回复weddingdress
  • nikeforce

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

    13年前 (2010-09-26)
    回复
    回复nikeforce
  • uggbootsonsale

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

    13年前 (2010-09-20)
    回复
  • uggboots

    有了这个就方便多了!

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

    大家方便才是真的方便

    13年前 (2010-09-01)
    回复
    回复uggboots
  • 淘宝最好的减肥药

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

    13年前 (2010-08-28)
    回复
  • 画英雄

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

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

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

    13年前 (2010-08-12)
    回复
    回复画英雄
  • 雨像眼泪

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

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

    多谢哥们支持

    13年前 (2010-08-07)
    回复
    回复雨像眼泪
  • diyidu

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

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

    哈哈!怎么怪了?

    13年前 (2010-08-06)
    回复
    回复diyidu
  • 土狼妹妹

    这个功能可以试试,不错

    13年前 (2010-08-05)
    回复
    回复土狼妹妹
  • 飞晏

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

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

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

    13年前 (2010-08-03)
    回复
    回复飞晏
  • 祛痘产品哪种好

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

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

    愿生意兴隆!哈哈!

    13年前 (2010-08-03)
    回复
  • 减肥药排行榜

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

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

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

    13年前 (2010-08-03)
    回复