Wie macht man einen Schalter und Scroll-Effekt mit Javascript und CSS?

Ich mag einen Scroll-Effekt auf meine Web-Seite machen:Wie macht man einen Schalter und Scroll-Effekt mit Javascript und CSS?

Der Inhalt meiner Seite:

<div id="first"> 
    Content 1 
    <a href="#second">Switch</a> 
</div> 
<div id="second"> 
    Content 2 
</div>

Natürlich, wenn ich Switch klicken, wird der Browser-Bildschirm von div#first zu div#second sofort wechseln.

Allerdings möchte ich einen Effekt erstellen, der div#first reibungslos zu schalten und auf div#second (nicht sofort) zu verschieben. Darüber hinaus möchte ich auch einen Scroll-Effekt erstellen. Wenn sich die Benutzer in div#first befinden und nach unten scrollen, wird der Browserbildschirm automatisch auf div#second und umgekehrt verschoben.

Wie kann ich das mit Javascript (oder jQuery wenn nötig) tun?

Quelle

2016-06-07 pexea12

Ja Jsfiddle

Hoffe, dass es hilft, ist, habe ich versucht, eine Antwort zu suchen und nicht finden. Wie können Sie mit Ihrem Code kommen, wenn Sie nicht wissen, wo Sie anfangen sollen? – pexea12

Ich bitte die Leute nicht, mich komplett zu codieren. Was ich frage, ist ein Vorschlag, ein Anfang. Ich denke, du solltest deine "-1" entfernen, wenn du meine Absicht verstehst. Vielen Dank! – pexea12

Versuchen Sie, SO (oder zumindest einige weitere vorausgesetzt, Sie haben bereits). Ich habe keine Zweifel, dass das schon mal vorgefallen ist, –

Ja, können Sie das tun animate Methode

$("a").click(function(){ 
    $('html, body').animate({ 
     scrollTop: $("#second").offset().top 
    }, 900); 
})

Hier wird das :)

Quelle

2016-06-07 10:52:45 Thinker

Vielen Dank! Es ist viel besser für die Menschen, die richtigen Antworten auf ihre Fragen zu haben, nicht irgendwelche nutzlosen Argumente. – pexea12

Immer willkommen :) – Thinker

Wie macht man einen Schalter und Scroll-Effekt mit Javascript und CSS?

Antwort

Verwandte Themen