Glyphicon nicht einbindbar?


#1
Servus,

ich bin momentan dabei ein Glyphicon für die Scroll2Top Funktion einzubinden, was mir jedoch absolut nicht gelingt.

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

    // Der Button wird mit JavaScript erzeugt und vor dem Ende des body eingebunden.
    var back_to_top_button = ['<a href="#top" class="back-to-top">Nach oben</a>'].join("");
    $("body").append(back_to_top_button)

    // Der Button wird ausgeblendet
    $(".back-to-top").hide();

    // Funktion für das Scroll-Verhalten
    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() > 100) { // Wenn 100 Pixel gescrolled wurde
                $('.back-to-top').fadeIn();
            } else {
                $('.back-to-top').fadeOut();
            }
        });

        $('.back-to-top').click(function () { // Klick auf den Button
            $('body,html').animate({
                scrollTop: 0
            }, 800);
            return false;
        });
    });

    });
    </script>
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.

Zusätzlich noch die CSS Datei:
CSS:
.back-to-top {
 position: fixed;
 bottom:20px;
 right:20px;
 padding:1em;
}
 
#3
Wenn ich das so in meine Seite einbinde verrutscht die Navbar und der Button hängt oben.
Aber der Ansatz ist genauso wie ich es meine, der Code oben ist soweit korrekt, ich bräuchte halt nur den von dir genutzten Glyphicon anstelle des nach oben, wenn ich das so änder taucht dieser leider garnicht auf :/

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Ist das hier für Bootstrap 3? Bei meinem nutze ich schon das 4, oder ist das nicht schlimm?

Edit:
Javascript:
// Der Button wird mit JavaScript erzeugt und vor dem Ende des body eingebunden.
    var back_to_top_button = ['<a href="#top" class="back-to-top">Nach oben</a>'].join("");
    $("body").append(back_to_top_button)
Wenn ich das richtig verstehe geht es ja lediglich um diese Zeile Code wo das Icon irgendwie eingebunden werden muss
 

basti1012

Erfahrenes Mitglied
#5
Was meinst du ohne extra js Dateizu erstellen ?
Du must doch nur den Code
Code:
  <a class="backToTop" href="#" onclick="return false;" style="display: inline;"></a>
<script>
$(document).ready(function(){
    $(".backToTop").hide();
    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() > 100) {
                $('.backToTop').fadeIn();
            } else {
                $('.backToTop').fadeOut();
            }
        });
        $('.backToTop').click(function () {
            $('body,html').animate({
                scrollTop: 0
            }, 800);
            return false;
        });
    });

});
</script>
Irgendwo unten weiter in dein html einbinden ,die css Datei verlängern und dann geht das.

Du hast doch bestimmt schon js Datein die schon eingebunden sind oder nicht ?
Fals ja dann schreib den js Code da mit rein und mach das mit der css genau so
Code:
body{
  height:1000px;
}
.backToTop {
    position: fixed;
    right: 20px;
    bottom: 20px;
    display: none;
    width: 46px;
    height: 46px;
    background: url(https://blog.kulturbanause.de/wp-content/themes/kulturbanause-blog/img/sprite.png) no-repeat -11px -474px;
}
In diesen fall hier schreibst du die Zeile
Code:
  <a class="backToTop" href="#" onclick="return false;" style="display: inline;"></a>
noch in der html rein und dann sollte das gehen. Nicht vergessen das der Link zum Bild passen muß und zum Jquery Script auch.

Fals es nicht geht dann mach das mal so und gib mir mal den Link zur Seite