mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 19.04.2024 13:27 Benutzername: Passwort: Auto-Login

Thema: Scroll to Top vom 09.05.2017


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> Scroll to Top
Autor Nachricht
ypsiw
Threadersteller

Dabei seit: 08.10.2002
Ort: Nienhagen
Alter: 44
Geschlecht: Weiblich
Verfasst Di 09.05.2017 11:09
Titel

Scroll to Top

Antworten mit Zitat Zum Seitenanfang

Muss einen Scroll to Top Button in die Webseite einsetzen. Es ist alles sichtbar...das einzige Problem ist, er scrollt nicht nach oben. Ich bin jetzt schon ewig dran, finde aber den Fehler nicht.

Im CSS:
#return-to-top {
position: fixed;
bottom: 20px;
right: 20px;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.7);
width: 50px;
height: 50px;
display: block;
text-decoration: none;
-webkit-border-radius: 35px;
-moz-border-radius: 35px;
border-radius: 35px;
display: none;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#return-to-top i {
color: #fff;
margin: 0;
position: relative;
left: 16px;
top: 13px;
font-size: 19px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#return-to-top:hover {
background: rgba(0, 0, 0, 0.9);
}
#return-to-top:hover i {
color: #fff;
top: 5px;
}

Auf der PHP-Seite:
<script>
// ===== Scroll to Top ====
$(window).scroll(function() {
if ($(this).scrollTop() >= 50) { // If page is scrolled more than 50px
$('#return-to-top').fadeIn(200); // Fade in the arrow
} else {
$('#return-to-top').fadeOut(200); // Else fade out the arrow
}
});
$('#return-to-top').click(function() { // When arrow is clicked
$('body,html').animate({
scrollTop : 0 // Scroll to top of body
}, 500);
});
</script>

Im Head auf der index.php:
<!-- Return to Top -->
<a href="javascript:" id="return-to-top"><i class="icon-chevron-up"></i></a>
<!-- ICON NEEDS FONT AWESOME FOR CHEVRON UP ICON -->
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">


Wäre schön, wenn mir einer helfen könnte. Ich dreh hier sonst durch. *ha ha*
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
hadouken

Dabei seit: 07.11.2015
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 09.05.2017 13:31
Titel

Antworten mit Zitat Zum Seitenanfang

Mit Head meinst du <head>? Das <a href="javascript:" id="return-to-top"><i class="icon-chevron-up"></i></a> ist im <head>?
  View user's profile Private Nachricht senden
Anzeige
Anzeige
 
Ähnliche Themen Scroll...
Opera und CSS (Scroll)
JS | vertical scroll
mousewheel scroll problem!
CSS DIV scroll bleibt unten
Zoom und Scroll Effekt
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.