Glyphicon nicht einbindbar?

[Spencerr]

Servus,

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

<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:

.back-to-top {
 position: fixed;
 bottom:20px;
 right:20px;
 padding:1em;
}

 

[basti1012]

Wie meinst du das ?
So ?

Link zur Lösung

 

[Spencerr]

Wie meinst du das ?
So ?
https://codepen.io/basti1012/pen/yxRNer?editors=1100

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:

// 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

 

[Spencerr]

Wie meinst du das ?
So ?
https://codepen.io/basti1012/pen/yxRNer?editors=1100

Ich habe auch schon diesen Code bei mir probiert, jedoch taucht dort das Glyphicon nicht auf, weil ich nicht weiß wie ich diesen Code in die Seite integrieren muss, ohne das ich extra ein js Datei erstellen muss :/
https://codepen.io/rdallaire/pen/apoyx/

 

[basti1012]

Was meinst du ohne extra js Dateizu erstellen ?
Du must doch nur den 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

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

  <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

 

[Spencerr]

https://codepen.io/basti1012/pen/BOqzBE?editors=1100

Hiermit funktioiniert es nun ohne Probleme, besten Dank nochmal!