Knopf nach oben


Status
Dieses Thema wurde gelöst! Zur Lösung gehen…

Webhufi

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:

DerTrojaner

Mitglied
Du kannst ja alles kopieren und dann die variable ändern, dann kannst du das hier verwenden
Javascript:
$('html, body').animate({
    scrollTop: $("#elementID").offset().top
}, 800);
das hast du in der zeile 28-31 im JS teil.


elemntID = ist dann deine ID wo hin du springen möchtest.
 
Zuletzt bearbeitet:

Webhufi

Mitglied
Ich bin ja ziemlich unbedarft, aber ich habe bemerkt, dass der zweite Knopf wohl anders heißen muss. Deshalb habe ich überall 'obenpfeil' umbenannt in 'obenpfeil2'.Die Klasse <i=class="obenkreis" ... heißt jetzt <i="obenkreis2" ...

Geändert: $('html, body').animate({
scrollTop: $("#menu").offset().top
}, 800);

wobei ich die ID menu vergeben habe.

Möglicherweise stimt das alles sogar, nur sitzt der neue Knopf an der gleichen Stelle wie der erste, und nur der erste funktioniert. Wie kann ich die Position des neuen Knopfes verändern, so dass er z.B. 20 px (oder in %) links des ersten Knopfes steht?
Wahrscheinlich muss 'position:relative;' anders heißen; aber wie?
 

Sempervivum

Erfahrenes Mitglied
Die Position wird durch dieses CSS fest gelegt:
Code:
#back-top2 {
    bottom: 0px;
    left: 100%;
    margin-left: -50px;
}
Um den zweiten Knopf links davon anzuordnen, brauchst Du nur die left-Position zu ändern:
Code:
#id-des-zweiten-knopfes {
    bottom: 0px;
    left: 100%;
    margin-left: -120px;
}
 

Webhufi

Mitglied
Ich musste noch eine Änderung vornehmen (bis ich Laie darauf gekommen bin!!!), sonst hocken beide Knöpfe doch übereinander:

#back-top2 {
position: fixed;
bottom: 10%;
left:50%;
/*margin-left:520px;*/
margin-left:470px;
z-index: 1000;
}

Die Codes der beiden Knöpfe habe ich so verändert, dass überall zwischen Knopf 1 und Knopf 2 unterschieden wird.

Bei meinen vielen Versuchen klappte es zwischendurch, dass die Buttons nach top und nach menu sprangen; jetzt, am Ende aller Test, springt der gelbliche Knopf auch nach top! Warum nur, bitte? Im HTML steht doch 'menu'?

Schaut mal hier auf die Testseite
 

Sempervivum

Erfahrenes Mitglied
jetzt, am Ende aller Test, springt der gelbliche Knopf auch nach top! Warum nur, bitte? Im HTML steht doch 'menu'?
Da ist dir irgend wie die Scrollposition abhanden gekommen, bei beiden Knöpfen steht
scrollTop: 0
bei der Animate-Anweisung (Zeile 328 und Zeile 355)
 

Webhufi

Mitglied
CSS:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
/* NACH OBEN 2 */
.obenkreis2 {
font-size:44px;
color:#E6D5B7;
}
.obenpfeil2 {
font-size:32px;
color:#grey;
position:relative;
top:3px;
transition: all 0.2s ease;
}
.obenpfeil2:hover {
top:-3px;
font-size:36px;
}

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

HTM

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

// hide #back-top2
$("#back-top2").hide();

// fade in #back-top2
$(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>
 

basti1012

Erfahrenes Mitglied
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>
 
Status
Dieses Thema wurde gelöst! Zur Lösung gehen…