{"id":75,"date":"2015-04-15T01:46:00","date_gmt":"2015-04-15T01:46:00","guid":{"rendered":"http:\/\/wjharil.com\/blog\/?p=75"},"modified":"2015-10-16T22:45:35","modified_gmt":"2015-10-16T22:45:35","slug":"scroll-to-top-jquery","status":"publish","type":"post","link":"https:\/\/wjharil.com\/blog\/scroll-to-top-jquery\/","title":{"rendered":"Bot\u00f3n Subir (Scroll to Top) con Jquery"},"content":{"rendered":"<p>Muchos de nosotros hemos vistos en muchos sitios web (en mi <a title=\"Programador Freelance Per\u00fa\" href=\"http:\/\/wjharil.com\">web personal<\/a> tambi\u00e9n), que al momento de ir bajando para ver m\u00e1s contenido, hace uso de un bot\u00f3n que indica \u00ab<strong>Subir<\/strong>\u00bb (o tambi\u00e9n llamado <strong>Scroll To Top<\/strong>), lo cu\u00e1l nos lleva a la cabecera de la <em>p\u00e1gina web<\/em>. Pues bien, veremos como agregar f\u00e1cilmente \u00e9se boton sin necesidad de implementar mucho c\u00f3digo (no tanto, enserio).<\/p>\n<p>Una vez, tengamos nuestra web hecha, podemos <strong>agregar en el footer<\/strong>, o <strong>header<\/strong> si queremos, el archivo <a href=\"https:\/\/github.com\/wjharil\/ScrollToTop\/blob\/master\/scrolltop.js\"><strong>scrolltop.js<\/strong><\/a>. \u00c9ste archivo, debe contener el siguiente c\u00f3digo:<\/p>\n<pre class=\"lang:js decode:true \" title=\"Scroll to Top\">var scrolltotop={\r\n\/\/startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control\r\n\/\/scrollto: Keyword (Integer, or \"Scroll_to_Element_ID\"). How far to scroll document up when control is clicked on (0=top).\r\nsetting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},\r\ncontrolHTML: '&lt;img src=\"http:\/\/i1155.photobucket.com\/albums\/p559\/scrolltotop\/arrow35.png\" \/&gt;', \/\/HTML for control, which is auto wrapped in DIV w\/ ID=\"topcontrol\"\r\ncontrolattrs: {offsetx:5, offsety:5}, \/\/offset of control relative to right\/ bottom of window corner\r\nanchorkeyword: '#top', \/\/Enter href value of HTML anchors on the page that should also act as \"Scroll Up\" links\r\nstate: {isvisible:false, shouldvisible:false},\r\nscrollup:function(){\r\nif (!this.cssfixedsupport) \/\/if control is positioned using JavaScript\r\nthis.$control.css({opacity:0}) \/\/hide control immediately after clicking it\r\nvar dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)\r\nif (typeof dest==\"string\" &amp;&amp; jQuery('#'+dest).length==1) \/\/check element set by string exists\r\ndest=jQuery('#'+dest).offset().top\r\nelse\r\ndest=0\r\nthis.$body.animate({scrollTop: dest}, this.setting.scrollduration);\r\n},\r\nkeepfixed:function(){\r\nvar $window=jQuery(window)\r\nvar controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx\r\nvar controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety\r\nthis.$control.css({left:controlx+'px', top:controly+'px'})\r\n},\r\ntogglecontrol:function(){\r\nvar scrolltop=jQuery(window).scrollTop()\r\nif (!this.cssfixedsupport)\r\nthis.keepfixed()\r\nthis.state.shouldvisible=(scrolltop&gt;=this.setting.startline)? true : false\r\nif (this.state.shouldvisible &amp;&amp; !this.state.isvisible){\r\nthis.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])\r\nthis.state.isvisible=true\r\n}\r\nelse if (this.state.shouldvisible==false &amp;&amp; this.state.isvisible){\r\nthis.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])\r\nthis.state.isvisible=false\r\n}\r\n},\r\n\r\ninit:function(){\r\njQuery(document).ready(function($){\r\nvar mainobj=scrolltotop\r\nvar iebrws=document.all\r\nmainobj.cssfixedsupport=!iebrws || iebrws &amp;&amp; document.compatMode==\"CSS1Compat\" &amp;&amp; window.XMLHttpRequest \/\/not IE or IE7+ browsers in standards mode\r\nmainobj.$body=(window.opera)? (document.compatMode==\"CSS1Compat\"? $('html') : $('body')) : $('html,body')\r\nmainobj.$control=$('&lt;div id=\"topcontrol\"&gt;'+mainobj.controlHTML+'&lt;\/div&gt;')\r\n.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})\r\n.attr({title:'Scroll to Top'})\r\n.click(function(){mainobj.scrollup(); return false})\r\n.appendTo('body')\r\nif (document.all &amp;&amp; !window.XMLHttpRequest &amp;&amp; mainobj.$control.text()!='') \/\/loose check for IE6 and below, plus whether control contains any text\r\nmainobj.$control.css({width:mainobj.$control.width()}) \/\/IE6- seems to require an explicit width on a DIV containing text\r\nmainobj.togglecontrol()\r\n$('a[href=\"' + mainobj.anchorkeyword +'\"]').click(function(){\r\nmainobj.scrollup()\r\nreturn false\r\n})\r\n$(window).bind('scroll resize', function(e){\r\nmainobj.togglecontrol()\r\n})\r\n})\r\n}\r\n}\r\nscrolltotop.init();<\/pre>\n<p>Para agregarlo, simplemente tendr\u00edamos que, luego de agregar <strong>jQuery 1.6.4+<\/strong>, adicionar \u00e9sta l\u00ednea.:<\/p>\n<pre class=\"lang:xhtml decode:true \">&lt;script src=\"js\/scrolltop.js\"&gt;&lt;\/script&gt;<\/pre>\n<p>Una vez realizado, <strong>podemos probar y veremos que al hacer scrol<\/strong>l (bajar), nos mostrar\u00e1 una imagen. Si quieres cambiar la imagen que sale por defecto, tendr\u00edas que editar el archivo <strong>scrolltop.js<\/strong> e irte a la l\u00ednea 5.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Muchos de nosotros hemos vistos en muchos sitios web (en mi web personal tambi\u00e9n), que<br \/><a class=\"moretag\" href=\"https:\/\/wjharil.com\/blog\/scroll-to-top-jquery\/\">Continuar Leyendo...<\/a>","protected":false},"author":1,"featured_media":76,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[35],"tags":["jquery"],"featured_image_src":"https:\/\/wjharil.com\/blog\/wp-content\/uploads\/2015\/04\/uparrow-slide.png","categorias":["Facebook","Fuera de tema","Recursos","Tutoriales"],"_links":{"self":[{"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/posts\/75"}],"collection":[{"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/comments?post=75"}],"version-history":[{"count":7,"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/posts\/75\/revisions"}],"predecessor-version":[{"id":84,"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/posts\/75\/revisions\/84"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/media\/76"}],"wp:attachment":[{"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/media?parent=75"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/categories?post=75"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/tags?post=75"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}