Brauche einen Back2Topic "Button" für meine Webseite

SkyDefend · 28. Januar 2016

Brauche einen Back2Topic "Button" für meine Webseite

Hallo,

wie Ihr bereits an der Überschrift sehen könnt, benötige ich einen Back2Top Button, um einfach wieder an den Seitenanfang zu gelangen.
Kennt sich damit vielleicht jemand hier aus, ich besitze die Erfahrung leider noch nicht :/ .
Der Button sollte unten rechts in der Ecke zu finden sein und der Übergang zum Anfang sollte weich verlaufen.
Die Homepage kreeire ich aktuell mit Bootstrap, falls das wichtig ist.

Ich hoffe, mir kann hier jemand helfen.

Vielen Dank!

SkyDefend

xActionx · 28. Januar 2016

AW: Brauche einen Back2Topic "Button" für meine Webseite

Mit jQuery könntest du das wie folgt realisieren

Code:

<script>
 
$(function(){
 
	$(document).on( 'scroll', function(){
 
		if ($(window).scrollTop() > 100) {
			$('.scroll-top-wrapper').addClass('show');
		} else {
			$('.scroll-top-wrapper').removeClass('show');
		}
	});
 
	$('.scroll-top-wrapper').on('click', scrollToTop);
});
 
function scrollToTop() {
	verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
	element = $('body');
	offset = element.offset();
	offsetTop = offset.top;
	$('html, body').animate({scrollTop: offsetTop}, 500, 'linear');
}
</script>

CSS-style:

Code:

<style>
.scroll-top-wrapper {
    position: fixed;
	opacity: 0;
	visibility: hidden;
	overflow: hidden;
	text-align: center;
	z-index: 99999999;
    background-color: #777777;
	color: #eeeeee;
	width: 50px;
	height: 48px;
	line-height: 48px;
	right: 30px;
	bottom: 30px;
	padding-top: 2px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
.scroll-top-wrapper:hover {
	background-color: #888888;
}
.scroll-top-wrapper.show {
    visibility:visible;
    cursor:pointer;
	opacity: 1.0;
}
.scroll-top-wrapper i.fa {
	line-height: inherit;
}
 
</style>

SkyDefend · 28. Januar 2016

AW: Brauche einen Back2Topic "Button" für meine Webseite

xActionx schrieb:

Mit jQuery könntest du das wie folgt realisieren

Code:

<script>
 
$(function(){
 
	$(document).on( 'scroll', function(){
 
		if ($(window).scrollTop() > 100) {
			$('.scroll-top-wrapper').addClass('show');
		} else {
			$('.scroll-top-wrapper').removeClass('show');
		}
	});
 
	$('.scroll-top-wrapper').on('click', scrollToTop);
});
 
function scrollToTop() {
	verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
	element = $('body');
	offset = element.offset();
	offsetTop = offset.top;
	$('html, body').animate({scrollTop: offsetTop}, 500, 'linear');
}
</script>

CSS-style:

Code:

<style>
.scroll-top-wrapper {
    position: fixed;
	opacity: 0;
	visibility: hidden;
	overflow: hidden;
	text-align: center;
	z-index: 99999999;
    background-color: #777777;
	color: #eeeeee;
	width: 50px;
	height: 48px;
	line-height: 48px;
	right: 30px;
	bottom: 30px;
	padding-top: 2px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
.scroll-top-wrapper:hover {
	background-color: #888888;
}
.scroll-top-wrapper.show {
    visibility:visible;
    cursor:pointer;
	opacity: 1.0;
}
.scroll-top-wrapper i.fa {
	line-height: inherit;
}
 
</style>

Erst einmal vielen Dank, dass du mir hilfst.
Es gibt nur ein Problem, der zeigt den Button nicht an, kommt der erst ab einer bestimmten Scrollweite zum Vorschein? oO
Ich habe das Script in der HTML Seite vor </body> gepackt und den CSS Code in eine eigene CSS Datei gepackt, welche auch verlinkt ist.

Edit: Ich benutze aktuell Notepad++, liegt das evtl daran?
Kenne die anderen noch nicht vom Aufbau her, müsste ich mir dann erstmal angucken, falls man dafür das Query benötigt.

xActionx · 29. Januar 2016

AW: Brauche einen Back2Topic "Button" für meine Webseite

Den button musst du per HTML noch einfügen und mit der Funktion aus der JS datei belegen. Vergewissere dich auch dass dein css-script erreicht werden kann.

SkyDefend · 29. Januar 2016

AW: Brauche einen Back2Topic "Button" für meine Webseite

xActionx schrieb:
Den button musst du per HTML noch einfügen und mit der Funktion aus der JS datei belegen. Vergewissere dich auch dass dein css-script erreicht werden kann.

Habe jetzt den 1 Code in eine JS Datei gepackt und verlinkt im HTML Dokument.
Den CSS Code hab ich in meine CSS Datei gepackt, die ebenfalls verlinkt ist.
Angezeigt wird mir aber kein Button, muss ich evtl noch irgendetwas erledigen, bevor der angezeigt wird?

Edit:
in HTML:

<script type="text/javascript" src="js2/backtop.js"></script>

Was müsste ich außer dem Link in HTML schreiben, könntest du mir da bitte noch helfen

.

xActionx · 29. Januar 2016

AW: Brauche einen Back2Topic "Button" für meine Webseite

SkyDefend schrieb:
Habe jetzt den 1 Code in eine JS Datei gepackt und verlinkt im HTML Dokument.
Den CSS Code hab ich in meine CSS Datei gepackt, die ebenfalls verlinkt ist.
Angezeigt wird mir aber kein Button, muss ich evtl noch irgendetwas erledigen, bevor der angezeigt wird?

Edit:
in HTML:

<script type="text/javascript" src="js2/backtop.js"></script>

Was müsste ich außer dem Link in HTML schreiben, könntest du mir da bitte noch helfen .

Ja wo soll der button auch herkommen ? ^^

Du musst ihn in HTML schreiben also so:

Code:

<button type="button">BackToTop</button>

den dann mit der Javascript-Funktion belegen.

Du solltest dich vllt mal in die Grundlangen von HTML usw. einlesen. Kann diese Seite --> W3Schools Online Web Tutorials sehr empfehlen, sofern du der englischen Sprache mächtig bist.

MFG

Edit:

Hast du jQuery eingebunden?

Code:

<script src="http://code.jquery.com/jquery-latest.js"></script>

Damit verwendest du die aktuellste Version von Jquery.

SkyDefend · 30. Januar 2016

AW: Brauche einen Back2Topic "Button" für meine Webseite

xActionx schrieb:
Ja wo soll der button auch herkommen ? ^^

Du musst ihn in HTML schreiben also so:

Code:

<button type="button">BackToTop</button>

den dann mit der Javascript-Funktion belegen.

Du solltest dich vllt mal in die Grundlangen von HTML usw. einlesen. Kann diese Seite --> W3Schools Online Web Tutorials sehr empfehlen, sofern du der englischen Sprache mächtig bist.

MFG

Edit:

Hast du jQuery eingebunden?

Code:

<script src="http://code.jquery.com/jquery-latest.js"></script>

Damit verwendest du die aktuellste Version von Jquery.

Der Button funktioniert nun, vielen Dank

Das einlesen ist nicht das Problem, da ich aktuell aber nur HTML und CSS behersche und von JavaScript "noch" keinen Plan habe ist das garnicht so easy

xActionx · 30. Januar 2016

AW: Brauche einen Back2Topic "Button" für meine Webseite

Sehr gut das freut mich.

Wenn du Javascript lernen willst kann ich dir Javascript: The Good Parts von Douglas Crockford wirklich empfehlen. Da wird auf alle Bestandteile von Javascript und vor allem wie man sie richtig benutzt eingegangen. JavaScript: The Good Parts: Working with the Shallow Grain of JavaScript: Amazon.de: Douglas Crockford: Fremdsprachige Bücher

Ansonsten arbeite ich auch gerne mit Coffee-Script https://arcturo.github.io/library/coffeescript/02_syntax.html . Hat ne sehr intuitive Syntax und man vermeidet viele Fehler die man mit JS gerne macht.

MFG

SkyDefend · 30. Januar 2016

AW: Brauche einen Back2Topic "Button" für meine Webseite

xActionx schrieb:
Sehr gut das freut mich.

Wenn du Javascript lernen willst kann ich dir Javascript: The Good Parts von Douglas Crockford wirklich empfehlen. Da wird auf alle Bestandteile von Javascript und vor allem wie man sie richtig benutzt eingegangen. JavaScript: The Good Parts: Working with the Shallow Grain of JavaScript: Amazon.de: Douglas Crockford: Fremdsprachige Bücher

Ansonsten arbeite ich auch gerne mit Coffee-Script https://arcturo.github.io/library/coffeescript/02_syntax.html . Hat ne sehr intuitive Syntax und man vermeidet viele Fehler die man mit JS gerne macht.

MFG

Das werde ich mir definitiv mal anschauen, der Dozent braucht bestimmt noch lange, bis er uns JavaScript und PHP und das Gedönse beibringt

Cheytac · 2. Februar 2016

AW: Brauche einen Back2Topic "Button" für meine Webseite

Ohne JQuery:
<button onclick="window.scrollTo(0,0)">Back2Topic</button>

Brauche einen Back2Topic "Button" für meine Webseite

SkyDefend

Komplett-PC-Aufrüster(in)

xActionx

Software-Overclocker(in)

SkyDefend

Komplett-PC-Aufrüster(in)

xActionx

Software-Overclocker(in)

SkyDefend

Komplett-PC-Aufrüster(in)

xActionx

Software-Overclocker(in)

SkyDefend

Komplett-PC-Aufrüster(in)

xActionx

Software-Overclocker(in)

SkyDefend

Komplett-PC-Aufrüster(in)

Cheytac

Komplett-PC-Aufrüster(in)

Ähnliche Themen