Vorhandenen Button abändern


Webhufi

Mitglied
Hallo,

ich habe auf meinen Seiten einen Button, der erst nach einer gewissen Scrollzeit erscheint und nach oben zurückführt, Beispiel hier

Diesen Button würde ich gerne vereinfachen und anderweitig einsetzen: Er sollte statisch sein und sich direkt hinter einem Text platzieren lassen; statisch insofern, dass er immer zu sehen ist und nicht erst nach dem Scrollen, und er sollte auch nicht 'animiert' sein.

Anwendung ist so gedacht:

"Ein beliebiger Text" - Button (mit Verlinkungsmöglichkeit)

Da ich nicht die geringste Ahnung habe, woher der Button überhaupt kommt und ich im Code nicht durchblicke, wäre ich für eine Hilfe sehr dankbar! Tatsächlich brauche ich nur "obenkreis" und obenpfeil"; aber woher nehmen?

Viele Grüße
Norbert
 

basti1012

Erfahrenes Mitglied
Soll der Button immer unten rechts in der Ecke zu sehen sein ? Dann must du ihn position:fixed geben , bottom:0 right:0.

Oder soll er irgendwo auf der Seite fest sein ? Zb unten im Footer oder so ? dann kannst du mal mit position:absolute versuchen und mit top und right und left spielen.

Wann der Button eingeblendet wird regelt das Javascript
Javascript:
 $(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;
         });
     });
 });
Mit etwas Pfantasie können auch Anfänger sehen was der Code da macht.

Deine jetzige Css dazu sieht so aus
CSS:
/* NACH OBEN */
.obenkreis {
    font-size:44px;
    color:rgba(51,51,51,0.4);
/* Versuch neuer Farben: color:rgba(232,102,73,1.0); - klappt gut, das ist der Hintergrund*/
    }
.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;
}
Wenn du lust hast spielst du da mal etwas rum ( googel notfalls ) und versuchst dein Glück mal selber.

Falls es nicht klappt dann sag bescheid dann sagt dir einer was du genau machen mußt
 

Webhufi

Mitglied
Hallo Basti,

natürlich stelle ich nicht einfach so eine Frage, sondern probiere schon selber ;-)
Danke für deine Antwort, die aber an meiner Frage bzw. Problemstellung vorbeigeht. Und ja, ich verstehe schon, was der Code macht, so weit bin ich schon.

Nochmal zur Verdeutlichung:

Der Button soll an beliebiger Stelle im Text eingefügt werden können, z.B. direkt HIER.
Wahrscheinlich würde ich das hinbekommen, aber ich finde nicht heraus, woher der Button (die Grafiken "obenkreis" und "obenpfeil" überhaupt bezogen wird!
 

basti1012

Erfahrenes Mitglied
HTML:
<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>
fa fa-angel-double-up ist eine Css klasse die von einen eingebunden style kommt den du nutzt
Code:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Hier sind alle icons die du mit den style nutzen kannst
 

basti1012

Erfahrenes Mitglied
welchen Browser nutzt du ?
Die meißten Browser haben eine Konsole ( f12 drücken ) damit kannst du deine ganze Seite untersuchen ,teste machen und viele mehr
 

Neue Beiträge