Scroll back to top

Scris de **revox** Joi Dec 23, 2010 1:31 pm

1. Ce este scroll back to top?
Scroll back to top este un script care va ajuta sa ajungeti in susul paginii foarte lin. El este foarte util pentru site-urile foarte lungi la care este obositor sa dai de scroll pana ajungi sus
Scriptul este optimizat pentru aproape toate browserele

2. Pasii pe care trebuie sa-i urmati

Codul necesar:

Cod:: /*********************************************** * Scroll To Top Control script- � Dynamic Drive DHTML code library (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit Project Page at http://www.dynamicdrive.com for full source code ***********************************************/ 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="http://icons.iconarchive.com/icons/taytel/orb/48/arrow-up-icon.png" style="width:48px; height:48px" />', //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()

1. Pentru inceput, dati click dreapta pe desktop
2. Alegeti New=>Text document
3. Copiati codul de mai sus in el folosind copy si paste
4. Inlocuiti "Link imagine sageata" cu linkul sagetii
Scroll back to top Gg

Modele de sageti Scroll back to top Agt_uninstall-product

Spoiler:

5. Dupa ce ati copiat codul si ati inlocuit linkul sagetii mergeti la file>Save as si salvati cu numele: scrolltop.js

6. Acum trebuie sa-l uploadati pe un host, de exemplu acesta: http://www.yourjavascript.com/
(Apasati pe choose file, selectati fisierul din pc si dati ok, apoi apasati pe heberger)

7. Site-ul va va oferi un link pe care il inlocuiti in codul de mai jos

Cod:: <script language="javascript" src="Link-ul Documentului js"></script>

8.: Codul trebuie neaparat introdus inainte de tagul
Cod:
</head>
pentru o functionare corecta

____________________________________________________________________________________
Nu aveti dreptul sa copiati tutorialul fara permisiunea mea
Daca aveti vreo intrebare postati in acest topic

__________________
Echipa PRM

Scris de **sAsY;X** Sam Dec 25, 2010 10:12 pm

Chiar ms:)!!!!

Scroll back to top

Scroll back to top

Re: Scroll back to top