Ich bin momentan dabei ein Glyphicon für die Scroll2Top Funktion einzubinden, was mir jedoch absolut nicht gelingt.
Das Glyphicon "glyphicon glyphicon-arrow-up " soll anstelle des "Nach oben" angezeigt werden, ich finde jedoch keinerlei Lösung wie ich das realisieren kann.
Auch wenn das wahrscheinlich ein total einfaches Problem ist, hoffe ich das mir da jemand helfen kann.
Code
<html>
<head>
<link rel="stylesheet" href="/css_webseite/bootstrap.css">
<link rel="stylesheet" href="/css_webseite/twitter-bootstrap.min.css">
<script src="/js_webseite/jquery.js"></script>
<style>
*{
margin:0;
padding:0;
}
body,html{
height:2000px;
display:flex;
flex-direction:column;
}
main{
display:block;
height:1900px;
background:lightgreen;
}
footer{
height:100px;
background:lightblue;
}
#back-to-top {
position: fixed;
right:20px;
top:80vh !important;
bottom:20px !important;
font-size:70px;
padding:1em;
}
</style>
</head>
<body>
BODY
<main>
<a name="top">TOP</a>
</main>
<footer>
FOOTER
<a href="#top" class="glyphicon glyphicon-circle-arrow-up" id="back-to-top"></a>
</footer>
<script>
$(document).ready(function(){
// var back_to_top_button = '<a href="#top" class="glyphicon glyphicon-circle-arrow-up" id="back-to-top"></a>';
// $("body").append(back_to_top_button);
$("#back-to-top").hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#back-to-top').fadeIn();
} else {
$('#back-to-top').fadeOut();
}
});
$('#back-to-top').click(function () {
$('html , body').animate({scrollTop: 0}, 1000);
});
});
</script>
</body>
</html>