1. Wähle eine Seite aus wo du deine "nach oben"- und "nach unten"-Funktionalität eintragen möchtest.
2. Füge als erstes Element auf dieser Seite einen HTML-Absatz ein mit der folgenden Code:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.evendown {
font-size: 36px;
font-weight: bold;
margin-bottom: 0px;
color: #FE0300;
text-align: center;
valign: middle;
}
.evendown:hover {
color: #528DDD;
}
.evenup {
font-size: 36px;
margin-top: 0px;
margin-bottom: 00px;
color: #FE0300;
text-align: center;
valign: middle;
}
.evenup:hover {
color: #528DDD;
}
@keyframes fa-blink {
0% { opacity: 1; }
25% { opacity: 0.75; }
50% { opacity: 0.5; }
75% { opacity: 0.25; }
100% { opacity: 0; }
}
.fa-blink {
-webkit-animation: fa-blink 1.75s linear infinite;
-moz-animation: fa-blink 1.75s linear infinite;
-ms-animation: fa-blink 1.75s linear infinite;
-o-animation: fa-blink 1.75s linear infinite;
animation: fa-blink 1.75s linear infinite;
}
</style>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script>
scrollingElement = (document.scrollingElement || document.body)
function scrollToBottom () {
scrollingElement.scrollTop = scrollingElement.scrollHeight;
}
function scrollToTop (id) {
scrollingElement.scrollTop = 0;
}
//Require jQuery
function scrollSmoothToBottom (id) {
$(scrollingElement).animate({
scrollTop: document.body.scrollHeight
}, 500);
}
//Require jQuery
function scrollSmoothToTop (id) {
$(scrollingElement).animate({
scrollTop: 0
}, 500);
}
</script>
<div class="evendown"><i onClick="scrollSmoothToBottom()" class="fa fa-angle-double-down fa-blink"></i></div>
3. Füge als letztes Element auf dieser Seite einen HTML-Absatz ein mit der folgenden Code:
<div class="evenup"><i onClick="scrollSmoothToTop()" class="fa fa-angle-double-up fa-blink"></i></div>
4. Und das war es schon . Have fun!