自动显隐回到顶部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()
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!
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!
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!
这个不错!
kkqkvbakaaqnlcmehiflgscgecgbjbqc
呵呵最后谢谢博主
呵呵 很喜欢这个代码功能
谢谢楼主的分享,我也用用呢
博主你太好了 我也下载个!
有了这个就方便多了!
这个小代码功能感觉很人性化,值得推荐
用360浏览器会被当成网页广告过滤掉。这个比较麻烦!
看见你恢复我也很高兴,默默支持你
你这博客是什么程序内核?感觉怪怪的。这个不错,下载收藏。
这个功能可以试试,不错
回来了~~ 开始更新了!!
那个放大镜非常的不错啊!
谢谢,博主分享!
沙发,
谢谢,博主分享。
这代码非常不错啊!