Zum Inhalt mit Anker nach einiger Zeit gehen

Ich habe ein "Intro-Bild" auf meiner Website, dass der Benutzer klicken kann und wird die Seite auf den Inhalt mit einem Anker nach unten scrollen. Nun, nicht jeder klickt auf den Link, also möchte ich, dass die Seite nach einigen Sekunden automatisch zum Inhalt scrollt (wenn der Nutzer nicht bereits den Anker-Link geklickt hat). Gibt es eine Möglichkeit, JS oder CSS zu verwenden, die mir dabei helfen könnten?Zum Inhalt mit Anker nach einiger Zeit gehen

Hier ist der Link http://www.bahelitours.com/es/info-test

Quelle

2017-03-02 Phil

'setTimeout()' mit einigen netten CSS kombiniert 'transition' – Shilly

Das Zielgebiet #info-content ist. Verwenden Sie setTimeout(), um nach einiger Zeit zu laufen (dies läuft bei 5000ms oder 5s - ändern Sie das, wie Sie für richtig halten), und sehen Sie, ob der Benutzer nicht gescrollt hat ($.scrollTop() == 0), und wenn nicht, scrollen Sie zum Zielbereich.

setTimeout(function() { 
 
    if ($(window).scrollTop() == 0) { 
 
    $('html, body').animate({ 
 
    scrollTop: $('#info-content').offset().top 
 
    },500,"swing"); 
 
    } 
 
},5000);

header,#info-content { 
 
    height: 300vh; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header></header> 
 
<section id="info-content">info-content</section>

Quelle

2017-03-02 16:38:47

Ok danke @ michael-Coker sieht aus wie das ist, was ich brauche, aber ich bin newie mit Javascript. Ich habe versucht, Ihren Code auf der Seite zu verwenden, aber es hat nicht funktioniert :(jeden Vorschlag? – Phil

@Phil ja, entfernen 'Header, # info-Inhalt { Höhe: 300vh; }' das ist CSS und Sie brauchen nicht das - das war nur für mein Beispiel. –

@Micheal das ist genial und hat perfekt funktioniert! Vielen Dank Kumpel :) – Phil

Zum Inhalt mit Anker nach einiger Zeit gehen

Antwort

Verwandte Themen