Question

На этой странице прочитал решение, как правильно установить кнопку вверх - ТУТ. Зашел на предложенный сайт и увидел, что там предлагается сделать эту кнопку через css. Могу ли вывести эту кнопку иначе, например, создать js и в него поместить весь необходимый код, потом этот js файл, специальным кодом добавить в нижнюю часть сайта, чтобы эта кнопка отображалась? И какой из этих вариантов будет лучшим, в плане нагрузки на сайт, лучше через js файл вывести кнопку, или вот как написано на том сайте?  

 

Answer 1

Тот что прописан напрямую кодом более быстро отрабатывает браузером, если делать файлом, отклик будет дольше, но работать так же будет. Какой вариант выбрать выбирать вам.

Comments

Понял, спасибо. Вот тот вариант кода, что на сайте предложен, он немного не подходит. Мне нужно кнопку вверх отобразить картинкой, а вот в том коде все немного по другому.

Вот, например, у меня есть код, который отображает кнопку, но он сделан через js. Вы могли бы мне помочь, как-то разделить этот код, чтобы я мог по отдельности его поставить через css. Да и этот код какой-то большой, по сравнению с тем, что вы видите на скрине выше. Может здесь есть ещё какой-то ненужный мусор? Нужен именно этот вариант, потому что вот тут есть нужные мне настройки скорости пролистывания страницы, а в коротком варианте, мне не понятно, что нужно поменять, чтобы скорость была такой же.

  var scrolltotop={setting:{startline:300,scrollto:0,scrollduration:700,fadeduration:[500,100]},controlHTML:'<img src="/gotop.png" style="width:48px; height:48px" />',controlattrs:{offsetx:50,offsety:5},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()

 

---

Максим Прескоп,

Извините, но за разбором данного скрипта вам к автору сайта, где вы его нашли, на примере на картинке маленький пример, но вы не ищите легких путей и выбираете самый большой.