Scroll to top script aanpassen

Status
Niet open voor verdere reacties.

yoeri10

Gebruiker
Lid geworden
28 mrt 2014
Berichten
30
hallo,

Op internet heb ik een script gevonden 'scroll to top'
De button om te klikken voor deze functie word nu via een tijd bepaald.
Is het mogelijk om dat vanaf een aantal pixels te laten verschijnen? bijvoorbeeld vanaf 200pixels vanaf top.

Dit is het bestaande 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:[800, 000]},
	controlHTML: '', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol" class="GoUp"
	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 class="GoUp" id="topcontrol">'+mainobj.controlHTML+'Omhoog</div>')
				.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute',  opacity:1, display:'block', cursor:'pointer'})
				.attr({title:'Ga naar boven'})
				.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()


Groetjes Yoeri
 
Beste Yoeri10,

Alsik het goed begrijp wil je de knop die je nu via een timeout toont alleen tonen als de scrollbar een bepaalde afstand van de top heeft.

Zo te zien kun je via scrolltotop.togglecontrol de knop aan of uit zetten.

Uitgaande van deze functionaliteit kun je met de volgende code zorgen dat de knop zichtbaar is wanneer jij dat wilt.

[js]
$(window).scroll(function(){
var pixelsFromTop = 300;
var shouldbevisible;

// $(window).scrollTop() haalt de huidige positie van de scrollbar op in pixels vanaf de top.
if($(window).scrollTop() > pixelsFromTop){
shouldbevisible = true;
}else{
shouldbevisible = false;
}
// Hier kijk ik of de huidige status van de knop zichtbaar is of niet.
// ALs deze zichtbaar is en dat niet zou moeten zijn dan moet de toggle aangeroepen worden om hem onzichtbaar te maken
if(scrolltotop.state.isvisible && !shouldbevisible){
scrolltotop.togglecontrol();
}
// Als deze niet zichtbaar is en dat wel zou moeten zijn dan moet de toggle aangeroepen worden om hem zichtbaar te maken
if(!scrolltotop.state.isvisible && shouldbevisible){
scrolltotop.togglecontrol();
}
});
[/js]
 
Bedankt voor uw reactie.

Moet ik uw code plaatsen in de plaats van:

Code:
	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
		}
	},

Gr. Yoeri
 
Nee, dit is een aanvulling op de code die gebruik maakt van de togglecontrol functie.
Het is nooit raadzaam om de code van bestaande plugins die door externen onderhouden worden aan te passen.
In plaats daar van kun je deze proberen te begrijpen en te gebruiken.
Eventueel een functie er om heen schrijven om hem uit te breiden wordt wel vaker gedaan. Dit is hier echter niet nodig.
De code die ik heb gegeven dient na scrolltotop.init(); te komen. (let op dat er een ';' achter de scrolltoptop.init() moet komen)
 
Laatst bewerkt:
Dank voor uw reactie.

Heb gedaan zoals u zei alleen werkt hij nog op tijd na het scrollen.

Hier de aangepaste code:

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:[800, 000]},
	controlHTML: '', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol" class="GoUp"
	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 class="GoUp" id="topcontrol">'+mainobj.controlHTML+'Omhoog</div>')
				.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute',  opacity:1, display:'block', cursor:'pointer'})
				.attr({title:'Ga naar boven'})
				.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();


$(window).scroll(function(){
    var pixelsFromTop = 500;
    var shouldbevisible;
    
    // $(window).scrollTop() haalt de huidige positie van de scrollbar op in pixels vanaf de top.
    if($(window).scrollTop() > pixelsFromTop){
        shouldbevisible = true;
    }else{
       shouldbevisible = false; 
    }
    // Hier kijk ik of de huidige status van de knop zichtbaar is of niet.
    // ALs deze zichtbaar is en dat niet zou moeten zijn dan moet de toggle aangeroepen worden om hem onzichtbaar te maken
    if(scrolltotop.state.isvisible && !shouldbevisible){
        scrolltotop.togglecontrol();
    }
    // Als deze niet zichtbaar is en dat wel zou moeten zijn dan moet de toggle aangeroepen worden om hem zichtbaar te maken
    if(!scrolltotop.state.isvisible && shouldbevisible){
       scrolltotop.togglecontrol(); 
    }
});

Ben ik nog iets vergeten?
 
Ik zie in deze code niet waar hij op tijd wordt toegevoegd. Ik neem aan dat dit ergens anders gebeurd. Dit zou daar weg gehaald moeten worden. Als iets op tijd gebeurd in JavaScript is dit meestal met behulp van setTimeOut of setInterval.
 
Volgens mij zit het hem in dit stukje:
Code:
setting: {startline:1000, scrollto: 0, scrollduration:1000, fadeduration:[800, 000]},

Op het momenten dat ik deze lager zet bijvoorbeeld:
Code:
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[800, 000]},

Word de knop eerder getoond. Alleen wat voor waarde is de startline? zijn dit dan de pixels of een tijd?
 
ah, dit is een animatie
De knop is er gelijk al maar doet er even over om zichtbaar te worden. Ik denk dat het voldoende is om na de init nog even de toggle aan te roepen. Blijkbaar zet de init hem gelijk zichtbaar (opzich logisch)
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan