返回顶部按钮大全,适合点点网,个人博客,WordPress

柳飘清枫:


一个好的返回顶部按钮可以增加用户的使用体验,之前的返回顶部按钮最近出问题,严重影响加载速度,遂决定更换之。今天清枫发现了一个网站,上面提供各式各样的返回顶部按钮,HTML代码,可以自行添加到博客代码的 <body></body> 标签内,加载速度很快。

代码获取地址:http://dyygtfx.com/top 

 

 

关于自定义按钮,需要深入的可以继续往下阅读。

该作者给出的按钮都是原先设定好的,直接加载JS即可,所以要更换比较麻烦,你也可以用下面的代码,加载速度一样的,只是占用空间:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script type="text/javascript">var scrolltotop={    setting: {startline:600, scrollto: 0, scrollduration:600, fadeduration:[500,500]},    controlHTML: '<img src="http://m1.img.libdd.com/farm4/2012/0826/16/F0A53E337583D7A98DC33891F79CB4BEDF3D75004114_54_54.PNG" />',     controlattrs: {offsetx:40, offsety:60},     anchorkeyword: '#top',  state: {isvisible:false, shouldvisible:false},    scrollup:function(){        if (!this.cssfixedsupport)             this.$control.css({opacity:0})         var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)        if (typeof dest=="string" && jQuery('#'+dest).length==1)             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             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()!='')                 mainobj.$control.css({width:mainobj.$control.width()})            mainobj.togglecontrol()                                                                                                      $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){                mainobj.scrollup()                return false            })            $(window).bind('scroll resize', function(e){                mainobj.togglecontrol()            })        })    }}scrolltotop.init()</script>

 

代码参数修改,主要是下面这几段:

  • setting: {startline:180, scrollto: 0, scrollduration:600, fadeduration:[500,500]}, 

  • startline:600  按钮出现的位置(单位:像素),即向下滚动多少出现按钮,这里设置的是600,也就是页面滚动600像素后开始出现按钮,原代码是100,出现太早了,清枫觉得600比较合适,当然你也可以根据自己的需要修改;

  • scrollto: 0  滚动到的位置(单位:像素),默认0表示滚动到顶部,加一个数值则停在页面相应的位置,如果你的博客标题不在顶部,可以修改这个参数控制;

  • scrollduration:600  回到顶部滚动的时间(单位:毫秒),这个是重要数值,可以根据这个调节滚动速度,默认是1000个人觉得太慢了,600比较舒服;

  • fadeduration:[500,500]  按钮淡入淡出的时间(单位:毫秒),默认值是 [500,100],即淡入慢淡出快,给的代码都调成了500毫秒,你也可以自行设置。

  • 按钮图片参数,修改地址就好了,不用我赘述啦。

  • controlattrs: {offsetx:40, offsety:60},

  • 按钮位置参数, offsetx  表示横坐标,offsety  表示竖坐标,相对应右下角;修改后面的参数可以更改按钮位置,单位是像素。

 

更多相关文章:❤ 点点网

Shared By Cleris

评论
热度 ( 1 )
  1. sunny的花园柳飘清枫 转载了此文字