Naar de bovenkant toe scrollen

van kiekeboe op wo 9 maa 2011 - 11:58

Naar de bovenkant toe scrollen

Hallo!

Hier is een tutorial over hoe je een scroller laat verschijnen, die je weer terug naar de top brengt. Voor een voorbeeld, scroll hier een stuk naar onder, dan zal rechtsonder in het beeld een pijltje verschijnen waar je op kan klikken.

De tutorial
Allereerst beginnen we met een mooi icoontje uit te zoeken dat ons straks naar boven zal brengen. Hier zijn er een paar:

Directe link:

Code:: http://icons.iconarchive.com/icons/pixelmixer/basic-2/48/arrow-up-icon.png

Directe link:

Code:: http://icons.iconarchive.com/icons/custom-icon-design/pretty-office-5/48/navigate-up-icon.png

Directe link:

Code:: http://icons.iconarchive.com/icons/custom-icon-design/pretty-office-4/48/upload-icon.png

Directe link:

Code:: http://icons.iconarchive.com/icons/visualpharm/must-have/48/Stock-Index-Up-icon.png

Directe link:

Code:: http://icons.iconarchive.com/icons/pixelmixer/basic/48/up-icon.png

Directe link:

Code:: http://icons.iconarchive.com/icons/mattahan/umicons/48/Arrow-icon.png

Daarna gaan we een nieuwe HTML pagina te maken. Ga naar:
Beheerderspaneel--->Modules--->HTML Pages management--->Create new HTML page
Kies uit bovenstaand overzichtje een mooie pijl uit, en pak daarvan de Directe link.

Pak nu dit script:

Code:: //** jQuery Scroll to Top Control script- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com. //** Available/ usage terms at http://www.dynamicdrive.com (March 30th, 09') //** v1.1 (April 7th, 09'): //** 1) Adds ability to scroll to an absolute position (from top of page) or specific element on the page instead. //** 2) Fixes scroll animation not working in Opera. 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://www.dynamicdrive.com/dynamicindex3/up.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()

Zoek daar deze link op:
http://www.dynamicdrive.com/dynamicindex3/up.png
Verwijder die en plak op precies dezelfde plaats jouw directe link naar keuze.

Dan is het script klaar. Kopieer het script en plak het in de HTML page. Klik dan op verzenden en noteer dan ergens de link naar je HTML page.

Als je dat hebt gedaan ben je bijna klaar! Ga dan naar:
Algemeen--->Announcements
Voeg, als je nog geen announcements eerder hebt gemaakt, een nieuwe toe. Of als je er al eentje hebt staan: bewerk je announcement dan. In beide gevallen moet deze regel code erin komen te staan:

Code:: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="DelinknaarjeHTMLpaginahier"></script>

Vergeet niet om DelinknaarjeHTMLpaginahier daadwerkelijk te vervangen voor die link! Klik dan op verzenden, en je bent klaar!

Notes

Voor de gevorderde onder ons, kan je

Code:: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="DelinknaarjeHTMLpaginahier"></script>

Ook in je templates zetten(Overal_Header) als je PhBB2 of PunBB gebruikt. Probeer dit script áltijd in de Head te zetten.

MVG
Kiekeboe

Geschreven door Kiekeboe