Knopf nach oben

Webhufi

Erfahrenes Mitglied
Hallo,

ich habe einen netten Knopf (grau/weiß), der mir von jeder Stelle aus wieder nach oben springt.

Jetzt wünsche ich mir einen zweiten Knopf (Farbe kann ich ändern) links daneben, der an eine andere Stelle springt; im Beipiel zu diesem farblich abgehobenen Menü oder dem Text darüber 'Alle Bilder werden...'. Bitte hier schauen

Kann mir jemand helfen?

Danke und viele Grüße
Norbert

Die Codes:

CSS:
CSS:
<link rel="stylesheet" href="[URL]https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css[/URL]">
<style>
/* NACH OBEN */
.obenkreis {
    font-size:44px;
    color:rgba(51,51,51,0.4);
/* Versuch neuer Farben: color:rgba(232,102,73,1.0)*/
    }
.obenpfeil {
    font-size:32px;
    color:#fff;
    position:relative;
    top:3px;
    transition: all 0.2s ease;
    }
.obenpfeil:hover {
    top:-3px;
    font-size:36px;
}

#back-top2 {
position: fixed;
bottom: 10%;
left:50%;
margin-left:520px;
z-index: 1000;
}
@media (max-width: 1180px) {
#back-top2 {
bottom: 0px;
left:100%;
margin-left:-50px;
}}
#back-top2 span {
display: block;
}
</style>
-------------------------------------------------

HTML:
HTML:
<!-- NACH OBEN -->
<div id="back-top2" style="display: block; ">
  <a href="#top">
<span class="fa-stack fa-lg">
  <i class="obenkreis fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-angle-double-up fa-stack-1x obenpfeil"></i>
</span>
   </a>
</div>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){

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

         // scroll body to 0px
         $('#back-top2 a').click(function () {
             $('body,html').animate({
                 scrollTop: 0
             }, 800);
             return false;
         });
     });
});
//]]>
</script>
 
Zuletzt bearbeitet von einem Moderator:
Wie kann ich den Knöpfen einen Alt-Text zuweisen?
ALT Atributte wird nur bei Bildern benutzt. Bei solchen Icons habe ich ich das eigentlich noch nicht gesehen.
Oder meinst TITLE Atribute ?
Den brauch man ja nur dazu schreiben
Code:
<i title="Back to Top" class="fa fa-angle-double-up fa-stack-1x obenpfeil2"></i>
 
Lösung
Zurück