Autor Thema: rotierender Top-Button mit Fading-Effekt (Gelesen 4936 mal)

Linus50 · « **am:** 12. September 2016, 13:27:47 »

Hallo,
leider kann ich die Buttongrafik in der "Quellseite" nicht finden. (siehe Anlage) Gibt es eine Alternative?

Danke für ein Nachricht.

nettesekel · « **Antwort #1 am:** 12. September 2016, 18:10:27 »

Einfach mal die Möglichkeiten nutzen, die der Browser so bietet, dann klappt das auch mit der Grafik: https://www.sylvis-blog.de/wp-content/uploads/2013/09/gototop.png

Linus50 · « **Antwort #2 am:** 12. September 2016, 19:39:04 »

Vielen Dank für *.png.
Habe jetzt versucht, den top-button einzubauen....klappt leider nicht. ich habe folgende codes so eingebaut:

<!DOCTYPE HTML PUBLIC ""-//W3C//DTD HTML 4.0 Transitional//EN"">
<HTML>
<HEAD>
<TITLE> Der Titel der Seite wird von NetObjects Fusion 2015 generiert </TITLE>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<style type="text/css">
#smoothup {
height: 40px;
width: 40px;
position:fixed;
bottom:50px;
right:100px;
text-indent:-9999px;
display:none;
background: url("../assets/images/gototop1.png");
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
transition-duration: 0.4s;
}
#smoothup:hover {
rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg)
}
</style>
<script type="text/javascript" src="../js/smoothscroll.js"></script>

</HEAD>
<BODY Von NetObjects Fusion 2015 generierte BODY-Parameter

>



</BODY>
</HTML>
<script type="text/javascript">
jQuery(document).ready(function($){
$(window).scroll(function(){
if ($(this).scrollTop() < 200) {
$('#smoothup') .fadeOut();
} else {
$('#smoothup') .fadeIn();
}
});
$('#smoothup').on('click', function(){
$('html, body').animate({scrollTop:0}, 400);
return false;
});
});
</script>

Das "gototop1.png ist in den assets (siehe Anlage) und sieht so auf der Seite "Rechtliches" aus. (siehe Anlage) (HTML5)

http://www.stempelhaeusle.de/Rechtliches/rechtliches.html

Was stimmt bloß nicht....Ich bitte um Hilfe. Vielen Dank

nettesekel · « **Antwort #3 am:** 12. September 2016, 22:00:16 »

Füge erstmal den zweiten Code am Body-Ende ein und nicht am Seitenende.

Code: HTML5

<script type="text/javascript">
jQuery(document).ready(function($){
        $(window).scroll(function(){
        if ($(this).scrollTop() < 200) {
                        $('#smoothup') .fadeOut();
        } else {
                        $('#smoothup') .fadeIn();
        }
    });
        $('#smoothup').on('click', function(){
                $('html, body').animate({scrollTop:0}, 400);
                return false;
                });
});
</script>

Linus50 · « **Antwort #4 am:** 13. September 2016, 10:35:44 »

Zitat von: nettesekel am 12. September 2016, 22:00:16

Füge erstmal den zweiten Code am Body-Ende ein und nicht am Seitenende.

Danke für die Nachricht. Sodele, das habe ich gemacht. Ich gehe davon aus, dass bei NOF 15 "Ende des Haupttextes" = Body-Ende ist.

Leider funktioniert das immer noch nicht....

nettesekel · « **Antwort #5 am:** 13. September 2016, 13:41:51 »

Wenn der Button-Code nicht in der Seite ist, kann es ja auch nicht funktionieren.

Code: HTML5

<a href="#top" id="smoothup" title="Back to top"></a>

Linus50 · « **Antwort #6 am:** 13. September 2016, 20:26:42 »

Danke, es funktioniert jetzt.

Gut, dass es Profis gibt.

Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion

Alles hat ein Ende...

Die letzten Beiträge

Schatznasen Feed

Aquablogger Feed

Strickzeugs Feed

Links für Katzenfreunde

...

Friendship