{"id":9192,"date":"2017-03-22T09:39:17","date_gmt":"2017-03-22T09:39:17","guid":{"rendered":"https:\/\/www.templatemonster.com\/de\/blog\/?p=9192"},"modified":"2020-05-22T11:56:43","modified_gmt":"2020-05-22T11:56:43","slug":"wie-erstelle-ich-einen-nach-oben-button-mit-css-und-jquery","status":"publish","type":"post","link":"https:\/\/monsterspost.com\/de\/wie-erstelle-ich-einen-nach-oben-button-mit-css-und-jquery\/","title":{"rendered":"Wie erstelle ich einen “Nach oben”-Button mit CSS und jQuery?"},"content":{"rendered":"

Wenn Ihr einen \"Nach oben\"-Button hinzuf\u00fcgen m\u00f6chtet, w\u00e4hrend Ihr immer noch Eure Website gestaltet<\/a> oder einfach nur neugierig seid, wie Ihr ihn auf eigene Faust bauen k\u00f6nnt, lest weiter!<\/p>\n

Ein\"Nach oben<\/em>\"-Button ist etwas, das viele von Euch auf vielen Webseiten gesehen habt. Es ist dieser Pfeil, der in der rechten unteren Ecke einer Webseite erscheint, wenn Ihr die Seite runtersgrollt. Wenn Ihr darauf klickt, bringt es Euch zur\u00fcck zum Anfang der Seite.<\/p>\n

\n

Zur\u00fcck zum Anfang<\/h3>\n

Unser Code wird aus zwei Teilen bestehen, dem CSS-Styling und einem kleinen jQuery-Skript. Beginnen wir mit CSS.<\/p>\n

\n

CSS Stile f\u00fcr den Button<\/h3>\n

Wir beginnen mit dem Erstellen von Stilen und Markup f\u00fcr unsere Schaltfl\u00e4che. Hier ist der HTML-Teil:<\/p>\n

<link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/font-awesome\/4.5.0\/css\/font-awesome.min.css\">\r\n\r\n<a id=\"button\"><\/a>\r\n\r\n<\/pre>\n
Die Schaltfl\u00e4che wird aus nur einem Anker-Tag mit einer ID-Taste bestehen. Wir haben auch einen Link zur FontAwesome Bibliothek, so dass wir ein Icon f\u00fcr unsere Schaltfl\u00e4che verwenden k\u00f6nnen.<\/p>\n
Die ersten Styles f\u00fcr den Button w\u00fcrden so aussehen:<\/p>\n
#button {\r\n  display: inline-block;\r\n  background-color: #FF9800;\r\n  width: 50px;\r\n  height: 50px;\r\n  text-align: center;\r\n  border-radius: 4px;\r\n  margin: 30px;\r\n  position: fixed;\r\n  bottom: 30px;\r\n  right: 30px;\r\n  transition: background-color .3s;\r\n  z-index: 1000;\r\n}\r\n#button:hover {\r\n  cursor: pointer;\r\n  background-color: #333;\r\n}\r\n#button:active {\r\n  background-color: #555;\r\n}\r\n\r\n<\/pre>\n
Da die Schaltfl\u00e4che ein Ankerelement ist und Anker in der Regel Inline-Elemente sind, m\u00fcssen wir die display<\/em> Eigenschaft in den Inline-Block verwandeln, damit wir Dimensionen zuordnen k\u00f6nnen.<\/p>\n
Lasst uns einen quadratischen Button von 50*50px<\/em> mit abgerundeten Ecken von 4px<\/em> machen. Wir verleihen ihm eine helle orange Farbe und einen Rand von 30px<\/em> auf jeder Seite.<\/p>\n
Die feste Position w\u00fcrde immer unseren Button veranlassen, an der gleichen Stelle zu bleiben, wenn wir die Seite runterscrollen und z-index<\/em> mit einer sehr hohen Zahl stellt sicher, dass die Schaltfl\u00e4che immer andere Website-Elemente \u00fcberlappt.<\/p>\n
Wenn wir mit der Maus \u00fcber einen Button fahren, wechselt der Cursor zu einem Zeiger und der Hintergrund wird dunkelgrau. Um den \u00dcbergang glatt zu machen, weisen wir den \u00dcbergang von 0,3 Sekunden<\/em> zur Hintergrundfarbe-Eigenschaft zu. Das hei\u00dft, wenn wir auf die Schaltfl\u00e4che klicken, \u00e4ndert sich auch die Hintergrundfarbe und wird etwas heller.<\/p>\n
\n
Hinzuf\u00fcgen eines Symbols<\/h3>\n
Im Moment ist unsere Schaltfl\u00e4che leer, also lasst uns ein Symbol hinzuf\u00fcgen. Wir tun es, indem wir ein ::after<\/em> Pseudoelement wie folgt hinzuf\u00fcgen:<\/p>\n
#button::after {\r\n  content: \"\\f077\";\r\n  font-family: FontAwesome;\r\n  font-weight: normal;\r\n  font-style: normal;\r\n  font-size: 2em;\r\n  line-height: 50px;\r\n  color: #fff;\r\n}\r\n\r\n<\/pre>\n
Wir werden ein Icon aus der beliebtesten Font-Bibliothek FontAwesome<\/a> ausw\u00e4hlen. Ich beschloss, das Chevron Up<\/a> Icon zu w\u00e4hlen.<\/p>\n
Um es in einem Pseudo-Element anzuzeigen, setzen wir die font-family<\/em> auf FontAwesome und weisen den Unicode-Wert des Symbols der content <\/em>Eigenschaft zu.<\/p>\n
Stellt au\u00dferdem sicher, dass Eure Zeilenh\u00f6he mit der H\u00f6he Eures Symbols\u00a0gleich ist, wenn Ihr es horizontal zentrieren m\u00f6chtet.<\/p>\n
\n
Funktionalit\u00e4t mit jQuery hinzuf\u00fcgen<\/h3>\n
In diesem Unterabschnitt werde ich Euch zeigen, wie man den Button so einstellt, damit er richtig funktioniert. Der einfachste Weg, dies zu erreichen, ist die Verwendung einer JavaScript-Bibliothek jQuery. Zuerst m\u00fcssen wir jQuery zum HTML-Markup unseres Codes hinzuf\u00fcgen. F\u00fcgt diese Codezeile kurz hinzu, bevor Ihr body<\/em> Tag schlie\u00dft.<\/p>\n
<script src=\u201dhttps:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.1.1\/jquery.min.js\u201d><\/script>\r\n<\/pre>\n
Jetzt k\u00f6nnen wir unser Skript mit jQuery-Syntax schreiben. F\u00fcgt nach der jQuery-Zeile das folgende Skript hinzu:<\/p>\n
<script>\r\n\r\njQuery(document).ready(function() {\r\n  \r\n  var btn = $('#button');\r\n\r\n  $(window).scroll(function() {\r\n    if ($(window).scrollTop() > 300) {\r\n      btn.addClass('show');\r\n    } else {\r\n      btn.removeClass('show');\r\n    }\r\n  });\r\n\r\n  btn.on('click', function(e) {\r\n    e.preventDefault();\r\n    $('html, body').animate({scrollTop:0}, '300');\r\n  });\r\n\r\n});\r\n\r\n<\/script>\r\n\r\n<\/pre>\n
Schauen wir uns dieses Skript genauer an.<\/p>\n
Hier die erste Zeile des Codes:<\/p>\n
jQuery(document).ready(function() {\r\n<\/pre>\n
Im Grunde funktioniert der Code innerhalb dieser Funktion nur dann, wenn das Dokument vollst\u00e4ndig geladen ist. Dies ist eine gute M\u00f6glichkeit, Fehler zu vermeiden, falls Ihr JavaScript-Code \u00c4nderungen an bestimmten Abschnitten einer Webseite vornehmen m\u00f6chtet, die nicht vollst\u00e4ndig im Browser geladen sind.<\/p>\n
Der Code, den wir nach dem Dokument laufen lassen, ist voll geladen. Es besteht aus zwei Hauptbl\u00f6cken, bei denen jeder seine eigene Sache macht.<\/p>\n
Der erste Teil des Skripts macht unseren Button erscheinen und verschwinden, nachdem das Scrollen einen bestimmten Punkt erreicht hat. Der zweite Teil l\u00e4sst die Seite nach oben scrollen, nachdem wir auf die Schaltfl\u00e4che geklickt haben. Lasst uns jetzt jeden einzelnen Teil im Detail untersuchen.<\/p>\n
\n
Den Button erscheinen und verschwinden lassen<\/h3>\n
Dies ist der Code, der den Trick ausmacht:<\/p>\n
 var btn = $('#button');\r\n\r\n  $(window).scroll(function() {\r\n    if ($(window).scrollTop() > 300) {\r\n      btn.addClass('show');\r\n    } else {\r\n      btn.removeClass('show');\r\n    }\r\n  });\r\n\r\n<\/pre>\n
Zuerst stellen wir eine Variable btn fest und weisen sie einem Element mit einer ID von button<\/em> zu, so dass es einfacher f\u00fcr uns ist, es sp\u00e4ter im Code zu verwenden.<\/p>\n
Auch\u00a0 hilft dies JavaScript, die Berechnungen schneller zu machen. Sobald wir das Element in einer Variablen speichern, muss JavaScript nicht mehr die ganze Seite jedes Mal durchsuchen , wenn wir es wieder in unserem Code verwenden m\u00fcssen.<\/p>\n
.scroll()<\/a><\/strong><\/em><\/p>\n
JQuery hat eine praktische Funktion .scroll().<\/em> Seine Aufgabe ist es, ein St\u00fcck Code zu binden, das jedes Mal ausgef\u00fchrt wird, wenn das Scrollen auf Eurer Webseite geschieht. Es braucht einen Parameter, der eine Funktion ist, die jedes Mal ausgef\u00fchrt wird, wenn Ihr eine Seite runterscrollt. Obwohl Ihr es f\u00fcr ein beliebiges scrollbares Element anwenden k\u00f6nnt, z. B. Frames und Elemente mit Overflow-Eigenschaft, wenden wir es normalerweise an das Fensterelement an, da das Scrollen dort in den meisten F\u00e4llen erfolgt, einschlie\u00dflich unseres Beispiels.<\/p>\n
$(window).scroll(function() {\r\n<\/pre>\n
Innerhalb der Funktion platzieren wir diese Wenn-Sonst-Anweisung:<\/p>\n
    if ($(window).scrollTop() > 300) {\r\n      btn.addClass('show');\r\n    } else {\r\n      btn.removeClass('show');\r\n    }\r\n\r\n<\/pre>\n
Was wir hier versuchen zu tun, ist die vertikale Position der Bildlaufleiste zu \u00fcberpr\u00fcfen, damit unsere Schaltfl\u00e4che erscheint, wenn es unter einem bestimmten Punkt ist und verschwindet, wenn es \u00fcber diesem Punkt ist.<\/p>\n
Um die aktuelle Position der Bildlaufleiste zu erhalten, werden wir eine eingebaute jQuery-Methode verwenden .scrollTop()<\/a>. Es \u00fcbernimmt keine Parameter und gibt einfach eine Anzahl von Pixeln zur\u00fcck, die \u00fcber dem scrollbaren Bereich verborgen sind.<\/p>\n
Also, jedes Mal, wenn wir scrollen, \u00fcberpr\u00fcft JavaScript, wie viele Pixel versteckt sind und vergleicht sie mit einer Zahl. In unserem Fall stelle ich diese Zahl auf 300,<\/em> aber Ihr k\u00f6nnt es \u00e4ndern, wenn Ihr wollt.<\/p>\n
Wenn wir mehr als 300px<\/em> w\u00e4hlen, dann f\u00fcgen wir show<\/em> zu unserem Button-Element, damit es erscheint. Wenn die Zahl kleiner als 300<\/em> ist, entfernen wir diese Klasse. Hinzuf\u00fcgen und Entfernen von Klassen ist ein weiterer Grund, warum jQuery so beliebt ist. Wir k\u00f6nnen es mit zwei einfachen Methoden tun - addClass() <\/em>und removeClass().<\/em><\/p>\n
Allerdings haben wir noch keine show<\/em> Klasse in unserem CSS, also lasst uns es hinzuf\u00fcgen:<\/p>\n
    if ($(window).scrollTop() > 300) {\r\n      btn.addClass('show');\r\n    } else {\r\n      btn.removeClass('show');\r\n    }\r\n\r\n<\/pre>\n
Standardm\u00e4\u00dfig wird unsere Schaltfl\u00e4che ausgeblendet, also m\u00fcssten wir dem button <\/em>Element noch ein paar Regeln hinzuf\u00fcgen:<\/p>\n
#button {\r\n  transition: background-color .3s, \r\n    opacity .5s, visibility .5s;\r\n  opacity: 0;\r\n  visibility: hidden;\r\n}\r\n\r\n<\/pre>\n
Um den \u00dcbergang glatt zu machen, habe ich dem \u00dcbergangsattribut noch zwei weitere Werte hinzugef\u00fcgt und die Deckkraft und die Sichtbarkeit auf 0,5 Sekunden eingestellt.<\/p>\n
\n
Nach oben scrollen<\/h3>\n
Der zweite Teil des Skripts erm\u00f6glicht es Euch, zum Seitenanfang zu springen, nachdem Ihr auf die Schaltfl\u00e4che geklickt habt.<\/p>\n
  btn.on('click', function(e) {\r\n    e.preventDefault();\r\n    $('html, body').animate({scrollTop:0}, '300');\r\n  });\r\n\r\n<\/pre>\n
Die erste jQuery-Methode, die wir hier sehen, ist on()<\/a>. Sein erster Parameter ist das 'Klick' JavaScript Event, das jedes Mal auftritt, wenn wir in unserem Browser einen Mausklick machen. Der zweite Parameter ist eine Handler-Funktion, die ausgel\u00f6st wird, sobald das Ereignis auftritt.<\/p>\n
Die Handler-Funktion \u00fcbernimmt einen Event-Parameter. Wir k\u00f6nnen es nennen, wie auch immer wir es wollen, aber meist e <\/em>oder event<\/em> werden bevorzugt. Wir ben\u00f6tigen den Event-Parameter, um ihn an die Funktion weiterzugeben und f\u00fcr die preventDefault()<\/em> Methode zu verwenden.<\/p>\n
Die Methode e.preventDefault()<\/em> verhindert, dass die Standardaktion des Ereignisses geschieht, z.B. ein Link f\u00fchrt uns nicht zur n\u00e4chsten Seite. In unserem Fall ist es nicht entscheidend, denn unserem Anker-Element das href<\/em> Attribut fehlt und es w\u00fcrde uns sowieso nicht auf eine neue Seite bringen, aber es ist immer besser, nachzupr\u00fcfen.<\/p>\n
.animate()<\/a><\/em><\/strong><\/p>\n
Die jQuery .animate() <\/em>Methode macht das ganze Ding:<\/p>\n
    $('html, body').animate({scrollTop:0}, '300');\r\n<\/pre>\n
Der erste Parameter der .animate() <\/em>Methode ist die Liste der Eigenschaften, die wir animieren sollten. Unsere Eigenschaft hei\u00dft scrollTop<\/em> und wir wollen, dass es einen Wert von 0<\/em> hat. Der Typ dieses Parameters ist ein einfaches Objekt und deshalb m\u00fcssen wir geschweifte Klammern verwenden und unsere Werte mit dem Schl\u00fcssel\/Wert-Paar-Syntax notieren.<\/p>\n
Der zweite Parameter ist die Geschwindigkeit, mit der wir unsere Animation laufen lassen wollen. Es wird in Millisekunden gemessen und je h\u00f6her die Zahl, desto langsamer ist die Animation. Der Standard ist 400<\/em>, aber ich habe ihn auf 300<\/em> gestellt.<\/p>\n
Schlie\u00dflich wenden wir die animierte Methode f\u00fcr die HTML- und Body-Elemente auf unserer Webseite an. Jetzt jedes Mal, wenn wir auf die Schaltfl\u00e4che klicken, wird es uns zum Seitenanfang der Seite bringen.<\/p>\n
\n
Demo<\/a><\/h3>\n
Das Endergebnis k\u00f6nnt Ihr in dieser CodePen Demo<\/a> sehen. Ich habe au\u00dferdem einen Beispieltext f\u00fcr Demonstrationszwecke eingesetzt.<\/p>\n
See
\nthe Pen <a href=\"http:\/\/codepen.io\/matthewcain\/pen\/ZepbeR\/\">Back
\nto Top Button<\/a> by Matthew Cain (<a
\nhref=\"http:\/\/codepen.io\/matthewcain\">@matthewcain<\/a>) on <a
\nhref=\"http:\/\/codepen.io\">CodePen<\/a>.<br \/><\/p>\n
\n
\u00a0Zum Schlu\u00df<\/h3>\n
\"Nach oben\"-Buttons stellen ein gro\u00dfartiges Usability-Element auf einer Webseite dar und wenn Ihr dieses kleine, aber hilfreiche Detail auf Ihre Website einbringt, wird es sicher Eure Benutzererfahrung verbessern.\u00a0 Hoffentlich hat dieser Leitfaden Euch geholfen, Euer CSS- und JavaScript-Wissen zu erweitern und eventuell sogar einige \"Aha\"-Erlebnisse beschert, die f\u00fcr ambitionierte Webdesigner und Entwickler so n\u00fctzlich sein k\u00f6nnen.<\/p>\n
Der Artikel ist urspr\u00fcnglich auf dem\u00a0TemplateMonster.com-Blog<\/a>\u00a0erschienen und wurde aus dem Englischen \u00fcbersetzt<\/em><\/h5>\n","protected":false},"excerpt":{"rendered":"
Wenn Ihr einen \"Nach oben\"-Button hinzuf\u00fcgen m\u00f6chtet, w\u00e4hrend Ihr immer noch Eure Website gestaltet oder einfach nur neugierig seid, wie Ihr ihn auf eigene Faust bauen k\u00f6nnt, lest weiter! Ein\"Nach oben\"-Button ist etwas, das viele von Euch auf vielen Webseiten gesehen habt. Es ist dieser Pfeil, der in der rechten unteren Ecke einer Webseite erscheint, […]<\/p>\n","protected":false},"author":1805543,"featured_media":9193,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[16],"tags":[34,231,226,223],"yoast_head":"\nWie erstelle ich einen "Nach oben"-Button mit CSS und jQuery?<\/title>\n<meta name=\"description\" content=\"Wenn Ihr einen "Nach oben"-Button hinzuf\u00fcgen m\u00f6chtet, w\u00e4hrend Ihr Eure Website gestaltet oder einfach nur neugierig seid, wie es geht, willkommen an Bord!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/monsterspost.com\/de\/wie-erstelle-ich-einen-nach-oben-button-mit-css-und-jquery\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Wie erstelle ich einen "Nach oben"-Button mit CSS und jQuery?\" \/>\n<meta property=\"og:description\" content=\"Wenn Ihr einen "Nach oben"-Button hinzuf\u00fcgen m\u00f6chtet, w\u00e4hrend Ihr Eure Website gestaltet oder einfach nur neugierig seid, wie es geht, willkommen an Bord!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/monsterspost.com\/de\/wie-erstelle-ich-einen-nach-oben-button-mit-css-und-jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"TemplateMonster Deutscher Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/templatemonster.de\/\" \/>\n<meta property=\"article:published_time\" content=\"2017-03-22T09:39:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-05-22T11:56:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2017\/03\/back-to-top-button-featured-2.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"538\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Olga Wirth\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@TM_Deutschland\" \/>\n<meta name=\"twitter:site\" content=\"@TM_Deutschland\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Olga Wirth\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/monsterspost.com\/de\/wie-erstelle-ich-einen-nach-oben-button-mit-css-und-jquery\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/monsterspost.com\/de\/wie-erstelle-ich-einen-nach-oben-button-mit-css-und-jquery\/\"},\"author\":{\"name\":\"Olga Wirth\",\"@id\":\"https:\/\/monsterspost.com\/de\/#\/schema\/person\/e49572bf6360863c66e5b53b2cab591e\"},\"headline\":\"Wie erstelle ich einen “Nach oben”-Button mit CSS und jQuery?\",\"datePublished\":\"2017-03-22T09:39:17+00:00\",\"dateModified\":\"2020-05-22T11:56:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/monsterspost.com\/de\/wie-erstelle-ich-einen-nach-oben-button-mit-css-und-jquery\/\"},\"wordCount\":1488,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/monsterspost.com\/de\/#organization\"},\"keywords\":[\"CSS3\",\"HTML5\",\"jQuery\",\"Web-Entwicklung\"],\"articleSection\":[\"Webentwicklung\"],\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/monsterspost.com\/de\/wie-erstelle-ich-einen-nach-oben-button-mit-css-und-jquery\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/monsterspost.com\/de\/wie-erstelle-ich-einen-nach-oben-button-mit-css-und-jquery\/\",\"url\":\"https:\/\/monsterspost.com\/de\/wie-erstelle-ich-einen-nach-oben-button-mit-css-und-jquery\/\",\"name\":\"Wie erstelle ich einen \\\"Nach oben\\\"-Button mit CSS und jQuery?\",\"isPartOf\":{\"@id\":\"https:\/\/monsterspost.com\/de\/#website\"},\"datePublished\":\"2017-03-22T09:39:17+00:00\",\"dateModified\":\"2020-05-22T11:56:43+00:00\",\"description\":\"Wenn Ihr einen \\\"Nach oben\\\"-Button hinzuf\u00fcgen m\u00f6chtet, w\u00e4hrend Ihr Eure Website gestaltet oder einfach nur neugierig seid, wie es geht, willkommen an Bord!\",\"breadcrumb\":{\"@id\":\"https:\/\/monsterspost.com\/de\/wie-erstelle-ich-einen-nach-oben-button-mit-css-und-jquery\/#breadcrumb\"},\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/monsterspost.com\/de\/wie-erstelle-ich-einen-nach-oben-button-mit-css-und-jquery\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/monsterspost.com\/de\/wie-erstelle-ich-einen-nach-oben-button-mit-css-und-jquery\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/monsterspost.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Wie erstelle ich einen “Nach oben”-Button mit CSS und jQuery?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/monsterspost.com\/de\/#website\",\"url\":\"https:\/\/monsterspost.com\/de\/\",\"name\":\"TemplateMonster Deutscher Blog\",\"description\":\"Just another MonsterPost Sites site\",\"publisher\":{\"@id\":\"https:\/\/monsterspost.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/monsterspost.com\/de\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de-DE\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/monsterspost.com\/de\/#organization\",\"name\":\"MonsterPost Deutschland\",\"url\":\"https:\/\/monsterspost.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de-DE\",\"@id\":\"https:\/\/monsterspost.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Logo-TM.png\",\"contentUrl\":\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Logo-TM.png\",\"width\":180,\"height\":180,\"caption\":\"MonsterPost Deutschland\"},\"image\":{\"@id\":\"https:\/\/monsterspost.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.instagram.com\/template_monster\/\",\"https:\/\/www.pinterest.com\/templatemonster\/\",\"https:\/\/www.youtube.com\/channel\/UC19iEGcEhlFidO5ruNGE5yg\",\"https:\/\/www.facebook.com\/templatemonster.de\/\",\"https:\/\/twitter.com\/TM_Deutschland\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/monsterspost.com\/de\/#\/schema\/person\/e49572bf6360863c66e5b53b2cab591e\",\"name\":\"Olga Wirth\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de-DE\",\"@id\":\"https:\/\/monsterspost.com\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/fd431cbc24e171c296d1c39748f17e2f?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/fd431cbc24e171c296d1c39748f17e2f?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g\",\"caption\":\"Olga Wirth\"},\"description\":\"Hat sich Texterin auf den Bereich Webdesign und Online-Marketing spezialisiert. Olga auf Facebook.\",\"url\":\"https:\/\/monsterspost.com\/de\/author\/olgawirth\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Wie erstelle ich einen \"Nach oben\"-Button mit CSS und jQuery?","description":"Wenn Ihr einen \"Nach oben\"-Button hinzuf\u00fcgen m\u00f6chtet, w\u00e4hrend Ihr Eure Website gestaltet oder einfach nur neugierig seid, wie es geht, willkommen an Bord!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/monsterspost.com\/de\/wie-erstelle-ich-einen-nach-oben-button-mit-css-und-jquery\/","og_locale":"de_DE","og_type":"article","og_title":"Wie erstelle ich einen \"Nach oben\"-Button mit CSS und jQuery?","og_description":"Wenn Ihr einen \"Nach oben\"-Button hinzuf\u00fcgen m\u00f6chtet, w\u00e4hrend Ihr Eure Website gestaltet oder einfach nur neugierig seid, wie es geht, willkommen an Bord!","og_url":"https:\/\/monsterspost.com\/de\/wie-erstelle-ich-einen-nach-oben-button-mit-css-und-jquery\/","og_site_name":"TemplateMonster Deutscher Blog","article_publisher":"https:\/\/www.facebook.com\/templatemonster.de\/","article_published_time":"2017-03-22T09:39:17+00:00","article_modified_time":"2020-05-22T11:56:43+00:00","og_image":[{"width":900,"height":538,"url":"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2017\/03\/back-to-top-button-featured-2.jpg","type":"image\/jpeg"}],"author":"Olga Wirth","twitter_card":"summary_large_image","twitter_creator":"@TM_Deutschland","twitter_site":"@TM_Deutschland","twitter_misc":{"Verfasst von":"Olga Wirth","Gesch\u00e4tzte Lesezeit":"8 Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/monsterspost.com\/de\/wie-erstelle-ich-einen-nach-oben-button-mit-css-und-jquery\/#article","isPartOf":{"@id":"https:\/\/monsterspost.com\/de\/wie-erstelle-ich-einen-nach-oben-button-mit-css-und-jquery\/"},"author":{"name":"Olga Wirth","@id":"https:\/\/monsterspost.com\/de\/#\/schema\/person\/e49572bf6360863c66e5b53b2cab591e"},"headline":"Wie erstelle ich einen “Nach oben”-Button mit CSS und jQuery?","datePublished":"2017-03-22T09:39:17+00:00","dateModified":"2020-05-22T11:56:43+00:00","mainEntityOfPage":{"@id":"https:\/\/monsterspost.com\/de\/wie-erstelle-ich-einen-nach-oben-button-mit-css-und-jquery\/"},"wordCount":1488,"commentCount":0,"publisher":{"@id":"https:\/\/monsterspost.com\/de\/#organization"},"keywords":["CSS3","HTML5","jQuery","Web-Entwicklung"],"articleSection":["Webentwicklung"],"inLanguage":"de-DE","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/monsterspost.com\/de\/wie-erstelle-ich-einen-nach-oben-button-mit-css-und-jquery\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/monsterspost.com\/de\/wie-erstelle-ich-einen-nach-oben-button-mit-css-und-jquery\/","url":"https:\/\/monsterspost.com\/de\/wie-erstelle-ich-einen-nach-oben-button-mit-css-und-jquery\/","name":"Wie erstelle ich einen \"Nach oben\"-Button mit CSS und jQuery?","isPartOf":{"@id":"https:\/\/monsterspost.com\/de\/#website"},"datePublished":"2017-03-22T09:39:17+00:00","dateModified":"2020-05-22T11:56:43+00:00","description":"Wenn Ihr einen \"Nach oben\"-Button hinzuf\u00fcgen m\u00f6chtet, w\u00e4hrend Ihr Eure Website gestaltet oder einfach nur neugierig seid, wie es geht, willkommen an Bord!","breadcrumb":{"@id":"https:\/\/monsterspost.com\/de\/wie-erstelle-ich-einen-nach-oben-button-mit-css-und-jquery\/#breadcrumb"},"inLanguage":"de-DE","potentialAction":[{"@type":"ReadAction","target":["https:\/\/monsterspost.com\/de\/wie-erstelle-ich-einen-nach-oben-button-mit-css-und-jquery\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/monsterspost.com\/de\/wie-erstelle-ich-einen-nach-oben-button-mit-css-und-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/monsterspost.com\/de\/"},{"@type":"ListItem","position":2,"name":"Wie erstelle ich einen “Nach oben”-Button mit CSS und jQuery?"}]},{"@type":"WebSite","@id":"https:\/\/monsterspost.com\/de\/#website","url":"https:\/\/monsterspost.com\/de\/","name":"TemplateMonster Deutscher Blog","description":"Just another MonsterPost Sites site","publisher":{"@id":"https:\/\/monsterspost.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/monsterspost.com\/de\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"de-DE"},{"@type":"Organization","@id":"https:\/\/monsterspost.com\/de\/#organization","name":"MonsterPost Deutschland","url":"https:\/\/monsterspost.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de-DE","@id":"https:\/\/monsterspost.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Logo-TM.png","contentUrl":"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Logo-TM.png","width":180,"height":180,"caption":"MonsterPost Deutschland"},"image":{"@id":"https:\/\/monsterspost.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.instagram.com\/template_monster\/","https:\/\/www.pinterest.com\/templatemonster\/","https:\/\/www.youtube.com\/channel\/UC19iEGcEhlFidO5ruNGE5yg","https:\/\/www.facebook.com\/templatemonster.de\/","https:\/\/twitter.com\/TM_Deutschland"]},{"@type":"Person","@id":"https:\/\/monsterspost.com\/de\/#\/schema\/person\/e49572bf6360863c66e5b53b2cab591e","name":"Olga Wirth","image":{"@type":"ImageObject","inLanguage":"de-DE","@id":"https:\/\/monsterspost.com\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/fd431cbc24e171c296d1c39748f17e2f?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/fd431cbc24e171c296d1c39748f17e2f?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g","caption":"Olga Wirth"},"description":"Hat sich Texterin auf den Bereich Webdesign und Online-Marketing spezialisiert. Olga auf Facebook.","url":"https:\/\/monsterspost.com\/de\/author\/olgawirth\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/posts\/9192"}],"collection":[{"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/users\/1805543"}],"replies":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/comments?post=9192"}],"version-history":[{"count":15,"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/posts\/9192\/revisions"}],"predecessor-version":[{"id":23782,"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/posts\/9192\/revisions\/23782"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/media\/9193"}],"wp:attachment":[{"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/media?parent=9192"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/categories?post=9192"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/tags?post=9192"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}