Software Frage Scroll down-Funktion erstellen, wie?

Dieses Thema im Forum "Tech & FAQ Forum" wurde erstellt von galaxy500, 26 August 2019.

  1. galaxy500

    galaxy500 Korinthenkacker!

    Registriert seit:
    7 Januar 2002
    Beiträge:
    1.148
    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!
  2. dr_tommi

    dr_tommi alter Oldie

    Registriert seit:
    26 April 2001
    Beiträge:
    12.858
    Wenn ich die Seite mit den Webtools von Chrome untersuche, sehe ich das:

    [​IMG]

    Und etwas weiter unten dann das:
    [​IMG]
  3. GiveThatLink

    GiveThatLink Aktives Mitglied

    Registriert seit:
    25 Oktober 2009
    Beiträge:
    469
    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.
    SkAvEnGeR sagt Danke.