Software Frage Scroll down-Funktion erstellen, wie?

galaxy500

Korinthenkacker!
Moin!

Ich möchte auf einer Webseite einen Scroll down-Knopf integrieren.
Er soll am unteren Rand eines sichtbaren full screen-Videos angezeigt
werden. Ich habe zwar mal das Programmieren gelernt, aber damals
gab es noch kein Internet, sprich, Assembler, RPG und COBOL.
Hier ein Beispiel, wie es in etwa aussehen soll: Klick mich

Ich erkenne dort
Code:
<div class="scroll_down">
<i class="fa fa-angle-down"> 
</i>
</div>
und in der effects.js
Code:
    //Scroll down to Content
     $('.scroll_down').click(function(){
       goToByScroll('#content_main');
     });
Ich weiss, dass das Scroll-Zeichen von fontawesome stammt und ich weiss,
wie ich einzelne Fontzeichen direkt anspreche (fa fa-angle-down).

Ich finde nichts, wie und in welcher CSS-Datei "scroll_Down" angesprochen wird,
sodass ich das ganze auf einer Webseite an die optimale Position bringen kann.

Ach ja, die Webseite ist ein JTL-Shop und auf die Inhalte der Seite
kann ich via Dropper/Drops zugreifen. Und auf CSS natürlich auch.

Sauber bleiben!
 

GiveThatLink

Bekanntes Mitglied
Entweder bin ich jetzt zu doof oder ihr :o

CSS ist doch erst mal nebensächlich, das findet man mit dem Inspector.

Der Scriptschnipsel verweist aber auf
Code:
function goToByScroll(id){
	 jQuery('html,body').animate({scrollTop: jQuery(id).offset().top},'slow');
}
Und damit ist auch klar, dass eine jQery-Lib noch benötigt wird. Und das steht im Seitentext
Code:
<script type="text/javascript" src="//strato-editor.com/.cm4all/res/static/jquery-1.7/jquery.js"></script>
Dann zum CSS, da gibt es ein parent, nicht gesehen?
Code:
.scroll_down {
    color: #E8C829;
}
.scroll_down {
    position: absolute;
    bottom: 20px;
    width: 25px;
    height: 50px;
    border-radius: 20px;
    font-size: 30px;
    left: 50%;
    margin-left: -12px;
    cursor: pointer;
}
Und dann kommt erst der Rest
Code:
.scroll_down .fa {
    margin: 0 0 0 3px;
    -webkit-animation: fademove 2.5s infinite;
    animation: fademove 2.5s infinite;
        animation-name: fademove;
        animation-duration: 2.5s;
        animation-timing-function: ease;
        animation-delay: 0s;
        animation-iteration-count: infinite;
        animation-direction: normal;
        animation-fill-mode: none;
        animation-play-state: running;
    font-size: 50px;
}
.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
        font-size: 14px;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
PS das Bild kannst du so nicht einbetten, wird hier nicht angezeigt.
http://images.devs-on.net/Image/bHtHoZVHQatYbhZk-Bereich.png

Durchgestrichen bzw ausgegraut bedeutet: nicht wirksam.
webkit ist zum einen unter Firefox nicht nutzbar und teils ist es schon kein Standard mehr, wenn Chrome es auch so anzeigt.

Warum .fa jetzt unter Firefox gar nicht genutzt wird (ist komplett ausgegraut), kann ich nicht sagen, es steckt in einem CSS von CF. (auch eine Standard-Lib für alles mögliche wie jQuery)

Fazit:

- Du brauchst jQuery (v1.7, vermutlich funktioniert v2 und v3 gar nicht, v1 ist als unsicher deklariert worden)
- du brauchst die anderen beiden Code-Schnipsel
- du brauchst diverse CSS + CSS-Schnipsel

Und natürlich ein <div id="content_main">
Wobei du das an beiden Stellen beliebig umbenennen kannst.
 
Oben Unten