Top Button

[Weiwioschaupp95]

hallo zusammen. habe eine frage, ist es möglich einen top Button in  der seite einzufügen. auf den seiten würde dan ein pfeil nach oben erscheinen und beim draufklicken fährt die seite ganz nach oben. habe schon scripts gefunden im netz. der pfeil erscheint, die seite fährt nach oben. aber die galerien funktionieren nichh mehr und die kopfzeile wird nicht mehr angezeigt. was kann man machen? support der swisscom war bis jetzt auch keine hilfe. weis jemand was man machen kann. vielen dank

[Yanik]

Ich kann dir gerne einen Code erstellen.

[Yanik · Accepted solution]

Hier ist der Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$(document).ready(function(){

    // hide #back-top first
    $("#back-top").hide();
  
    // fade in #back-top
    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() > 100) {
                $('#back-top').fadeIn();
            } else {
                $('#back-top').fadeOut();
            }
        });

        // scroll body to 0px on click
        $('#back-top a').click(function () {
            $('body,html').animate({
                scrollTop: 0
            }, 800);
            return false;
        });
    });

});
</script>
<style>
#back-top {
position: fixed;
bottom: 10px;
margin-left: 35%;
}

#back-top span {
width: 40px;
height: 40px;
display: block; background: url(DEIN BUTTON EINFÜGEN)
}
</style>
<div id="back-top" style="display: block;" >
<a href="#top"><span></span></a>
</div>

Wichtig: Bei ("DEIN BUTTON EINFÜGEN") kannst Du eine Bildadresse eines Buttons einfügen.

Bitte beachte dabei, dass Du keine Urheberrechtsverletzung begehst.

Idealerweise platzierst Du den Code einzeln.

[Weiwioschaupp95]

vielen dank für die hilfe. da ich aber neu bin auf dem gebiet, ist es mir nun nicht ganz klar wo ich den code einfügen muss.

ob unter einstellungen, Fusszeilencode oder ein html widget erstellen.  die nächste frage ist, wie genau muss ich die url adresse einfügen?

[Yanik]

---

@Weiwioschaupp95  schrieb:

da ich aber neu bin auf dem gebiet, ist es mir nun nicht ganz klar wo ich den code einfügen muss.

---

Am Idealsten ist es, wenn du ein HTML Widget erstellst, da ich nicht weis wie sich das Widget in der Kopfzeile verhält.

---

@Weiwioschaupp95  schrieb:

die nächste frage ist, wie genau muss ich die url adresse einfügen?

---

Rechtsklick auf ein Bild > Bildadresse Kopieren > bei "DEIN BUTTON EINFÜGEN" (Steht im Code) und dann ist das Widget bereit zum Einfügen

Du kannst dir zum Beispiel ein Urheberrechtsfreies Bild von Pixabay holen.

[Weiwioschaupp95]

vielen dank für die rasche antwort. werde es heute ausprobieren.

[Weiwioschaupp95]

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$(document).ready(function(){

    // hide #back-top first
    $("#back-top").hide();
  
    // fade in #back-top
    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() > 100) {
                $('#back-top').fadeIn();
            } else {
                $('#back-top').fadeOut();
            }
        });

        // scroll body to 0px on click
        $('#back-top a').click(function () {
            $('body,html').animate({
                scrollTop: 0
            }, 800);
            return false;
        });
    });

});
</script>
<style>
#back-top {
position: fixed;
bottom: 10px;
margin-left: 35%;
}

#back-top span {
width: 40px;
height: 40px;
display: block; background: url(https://cdn.pixabay.com/photo/2016/09/05/10/50/app-1646212_960_720.png)
}
</style>
<div id="back-top" style="display: block;" >
<a href="#top"><span></span></a>
</div>

irgendwie habe ich was falsch gemacht. habe die bildadresse eingefügt. aber es passiert nichts.

[Weiwioschaupp95]

habe es fertig gebracht. es funktioniert einwandfrei. gibt es eine möglichkeit, die geschwindigkeit beim nach oben laufen zu ändern?

[Yanik]

Du must ein Bild nehmen, das 40px auf 40px gross ist.

[Yanik]

Da müsste ich den ganzen Code umschreiben...

Am besten probierst du es mit einem Top-Button Generator.

[Weiwioschaupp95]

ok. nein nein das lassen wir sein. funkioniert auch so super gut. vielen dank nochmals.

.

[Weiwioschaupp95]

habe aber noch ein anderes problem. habe diesen code:

<iframe style="width: 1176px; height: 1240px;" src="https://docs.google.com/gview?url=https://static.homepagetool.ch/var/m_5/5e/5ee/19842/10565573-statu..." height="240" width="320" frameborder="0"></iframe>

im tool und bei der ansicht ist alles tip top. aber online kommt die meldung keine vorschau.

[Yanik]

Ich schaue mir das kurz an und melde mich bei dir zurück. 😉

[Yanik]

Folgende Fragen zur Problembehebung:

• Hast du den Code (bzw. iFrame) selbst gemacht oder hat ihn dir Google bereitgestellt?
• Hast du das Dokument öffentlich gestellt? (Anweisung: Öffnen Sie in Google Docs, Google Tabellen oder Google Präsentationen eine Datei. Im Web veröffentlichen. Klicken Sie im daraufhin eingeblendeten Fenster auf Einbetten.)
• Ist der Link korrekt im iFrame?

Wenn ich auf den Link gehe funktioniert es auch nicht, in diesem fall liegt es nicht am Code, sondern:

1. Der Link ist Falsch
2. Das Dokument wurde nicht Veröffentlicht
3. Einen Fehler auf Seite des Anbieters (Google)