avianex / Allgemein / Nach oben Button erstellen mit Font Awesome Icon

Nach oben Button erstellen mit Font Awesome Icon

Ich zeige in einem kleinen Tutorial wie man mit etwas CSS, Javascript und dem beliebten und flexiblen Iconfont FontAwesome so einen Button erstellt.

Bei großen Beiträgen oder aber auch bei responsiven Templates ist der Nutzer sehr froh, wenn er eine Möglichkeit bekommt übder einen kleinen Button wieder an den Anfang der Seite zu springen. Wer gleichzeitig ohnehin die Icons von FontAwesome einsetzt und keine zusätzliche Grafik verwenden möchte, z.B. um kostbare Ladezeit zu sparen, der kann mit folgenden Zeilen den auch auf meiner Seite realisierten „Up-Button“ integrieren.

Das Hauptproblem bei der Verwendung von FontAwesome-Icons als klickbare Elemente ist, das das i-Tag keine „cursor:pointer“ Anweiungen akzeptiert. Das bedeutet, der Cursor verwandelt sich beim hovern nicht. Dies ist natürlich sehr unschön. Um das zu umgehen, wrappen wir einfach das Icon in ein Button-Tag und formatieren es weg 😉

CSS definieren

Den CSS-Teil am Besten in ein externes Style-Sheet auslagern. Farben und Größen lassen sich natürlich beliebig variieren. Da Buttons die Eigenschaft haben, sich beim Klicken etwas zu bewegen – wir das aber bei unserem Up-Button im Flat-Design nicht wollen – korrigieren wir diese Bewegung für Mozilla und MS IE.

.move-up {
 position: fixed;
 bottom: 50px;
 right: 40px;
 z-index: 3;
 display: none;
 z-index:1000;
}

.move-up button {
  background:transparent;
  border:none;
}

.move-up button:active:hover {
  padding-right:4px !important;
  margin-right:2px;
}
 
.move-up i {
  font-size:60px;
  opacity:0.5;
  color:#BABABA;
}

Button setzen

Den Button positionieren wir im Template einfach unten, z.B. am unteren Ende eines div-Wrappers.

<form class="move-up" action="#up"><button><i class="fa fa-chevron-circle-up"></i></button></form>

Anmerkung: Früher hatte ich den Button in ein a-Tag gerwappt. Dies ist allerdings nicht HTML5-konform, daher lieber das form-Tag, so validiert es sauber.

JavaScript

Das folgende Code-Snippet ebenfalls einfach am Ende der Seite platzieren – z.B. in der Footer-Datei, sollte die existieren. Oder noch besser in eine ausgelagerte Javascript-Datei.


  jQuery(document).ready(function($){
    $(function(){
       $(window).scroll(function(){
          if ($(this).scrollTop() > 100){
          $('.move-up').fadeIn();
          } else {
	    $('.move-up').fadeOut();
	   }
     });
     $('.move-up button').click(function(){
     $('body,html').animate({
     scrollTop: 0
     }, 800);
     return false;
     });
   });
});


kommentieren