JavaScript Back2Top-Button erst einblenden wenn zu Seitenende gescrollt ist.

[failormooNN]

Hey Leute,

mein derzeitiges Problem bekomme ich einfach nicht gelöst und kann
auch bei Google keine hilfreichen Tipps finden.

Ich möchte, dass ein Back2Top-Element eingeblendet wird sobald ich
das untere Ende der Webseite erreicht habe.

Ich habe folgendes Script gefunden mit dem es möglich ist
ab einer bestimmten Pixelhöhe in Y ein Elementeinzublenden.

<script>
$(document).ready(function() {

	var myPosY;
	
	$(window).bind( 'scroll', function() {
		myPosY = $(window).scrollTop();
	    $("#fix").text( "pos-Y: " + myPosY + "px" );
	    if ( myPosY >= 100 && $('#box').hasClass('inactive') ) {
	    	$('#box').removeClass('inactive');
	    	$('#box').addClass('active');
	    	$('#box').fadeIn();
	    	
	    }
	    else if ( myPosY < 100 && $('#box').hasClass('active') ) {
	    	$('#box').removeClass('active');
	    	$('#box').addClass('inactive');
	    	$('#box').fadeOut();
	    }
	    
	});
});
</script>

Dieser funktioniert auch, löst aber leider nicht das Problem.
Ich habe mich allerdings gefragt ob es anhand dieses Scriptes nicht
möglich ist es zu lösen?!

Ich würde mich jedenfalls riesig freuen wenn es hier jemanden
geben würde, der mir dabei helfen könnteoder sogar einen
guten Lösungsvorschlag für mich hätte.

Vielen Dank und beste Grüße
Failor

 

[Madman1209]

Hi,

doofe Frage, aber: wo soll das Element denn eingeblendet werden? Auch am unteren Ende? Warum baust du es dann nicht gleich direkt ans Ende ein? Sieht man dann ja eh erst am Ende der Seite.

VG,
Mad

 

[failormooNN]

Genau, es befindet sich dann am unteren Ende, soll aber
durch CSS3 (keyframes) eine Einblendanimation bekommen sobald es erscheint.

 

[Madman1209]

Hi,

verstehe ich nicht: es erscheint doch dann eh beim Scrollen erst, wenn ich am unteren Ende der Seite bin, oder?! Reagiere doch einfach beim Element selbst darauf, dass es im Focus ist und nicht darauf, dass die Seite jetzt am Ende ist.

VG,
Mad

 

[failormooNN]

Was genau bewirkt demm :focus?

Ich möchte ja eben nicht, dass der Button reingescrollt wird, sondern
erscheint bzw. eingeblendet wird wenn ich unten angekommen bin.

 

[Madman1209]

Hi,

du musst nicht zwingend das "focus" Event benutzen (das würde dir nur helfen, wenn das Element schon im Fokus, also angewählt ist wenn ich mich nicht täusche).

Um welches Element geht es denn? Ein Button? Ein DIV? Was ist denn deine "box"? Und was für Events hat das Ding?

Wird ein Framework wie jQuery verwendet (scheint so, aber lieber zur Sicherheit nochmal gefragt)?

VG,
Mad

 

[Demon0no]

€:

$(window).scroll(function(){
	if($(window).scrollTop() / ( $(document).height() - $(window).height() ) == 1){
		$('#box').fadeIn();
	}else{
		$('#box').fadeOut();
	}
});

Das ist was du willst, richtig?
Dazu muss die box im css als "position:fixed" und "display:none" eingestellt sein.

 

[failormooNN]

Hi,

du musst nicht zwingend das "focus" Event benutzen (das würde dir nur helfen, wenn das Element schon im Fokus, also angewählt ist wenn ich mich nicht täusche).

Um welches Element geht es denn? Ein Button? Ein DIV? Was ist denn deine "box"? Und was für Events hat das Ding?

Wird ein Framework wie jQuery verwendet (scheint so, aber lieber zur Sicherheit nochmal gefragt)?

VG,
Mad

Es handelt sich um einen Back2Top-Link.

<p class="back2top"><a href="#page">Top</a></p>

jQuery ist bereits eingebunden da ich es auch anderweitig verwende.

Ergänzung (24. Juni 2014)

€:

$(window).scroll(function(){
	if($(window).scrollTop() / ( $(document).height() - $(window).height() ) == 1){
		$('#box').fadeIn();
	}else{
		$('#box').fadeOut();
	}
});

Das ist was du willst, richtig?
Dazu muss die box im css als "position:fixed" und "display:none" eingestellt sein.

Hey, danke für die Hilfe, funktioniert aber leider nicht. :/

 

[Demon0no]

Was funktioniert daran nicht?

 

[failormooNN]

Ich habe dasScript eingefügt und
dem Element die ID Box gegeben.
Im CSS habe ich der ID Box ein display:none;
und position:fixed; gegeben.

Wenn ich nach unten scrolle tut sich aber nichts.

 

[Demon0no]

Lass mal das display:none weg und guck wo das Element hin ist. Wenn es auch im Sichtbaren Zustand nicht im Bild ist, wird dir die Animation nicht viel bringen.

Der Code sollte funktionieren, hab ihn selber getestet.

€: Du könntest auch mal was in die Konsole ausgeben lassen/alert'en/whatever um zu sehen, ob der in die Bedingung überhaupt reinspringt.

 

[failormooNN]

Ok, hab ich gerade probiert, funktionier leider auch nicht.
Das Element ist jetzt durchgängig zu sehen.

 

[Demon0no]

Ich versuch grad dein Problem nochmal nachzustellen, aber bei mir funktioniert es.
Hast du vielleicht noch ein wenig mehr von deinem Code für uns?

 

[failormooNN]

Magst du mir mal deine Testdatei schicken?
Vllt. hab ich ja auch nur irgendwas vergessen.

Das wäre lieb.

 

[Demon0no]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>test</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body>
		<div style="height:110%;background-color:#ccc;position:absolute">
			test
		</div>
		<p id="box" style="position:fixed;display:none;" class="back2top"><a href="#">Top</a></p>
		<script src="js/jquery.min.js"></script>
		<script>
				$(window).scroll(function(){
				if($(window).scrollTop() / ( $(document).height() - $(window).height() ) == 1){
					$('#box').fadeIn();
				}else{
					$('#box').fadeOut();
				}
			});
		</script>
	</body>
</html>

 

[failormooNN]

Also ich habe jetzt genau deinen Code mal in eine lehre HTML-Datei kopiert und mir im Firefox anzeigen lassen.
Bei mir wird der Top-Link nicht eingeblendet. Er bleibt auf display:none;



Ich entschuldige mich. Es funktioniert doch. Hatte die juery.min.js übersehen.
Vielen Dank für die Hilfe, ich werds direkt selber probieren.

 

[Demon0no]

jQuery richtig eingebunden?

€: Funktioniert bei mir im Chrome, Firefox und sogar dem neusten IE.

€2: ah, ich wusste doch ich hab keine Halluzinationen *hehe*

 

[failormooNN]

hehe, ich hatte hier jquery schon für meine lightbox eingebunden, aber irgendwas
muss da schief gelaufen sein.
jetzt funktioniert es aber.

nochmal vielen dank. ich freu mich, dass es klappt.

lg
failor