2012-03-23 7 views
0

Ich entwarf eine einfache Website. Es hat sowohl mobile & Desktop-Ansichten. Es ist tatsächlich fertig, aber ich möchte ein bisschen Animation hinzufügen, obwohl ich das nicht erreichen kann.Smooth Go Top Aktion über CSS

Am unteren Rand der mobilen Website befindet sich ein Link, mit dem der Benutzer direkt nach oben gehen kann. Und ich möchte, dass dieser Link diese Aktion reibungslos und nicht sofort ausführt.

Ich würde das auch per CSS erreichen, wenn möglich mit neuen Attributen wie Animationsdauer, etc. Ich konnte es mir selbst nicht merken. Hier

ist der Code in meinem HTML-Code, der Benutzer nach oben zu gehen, lassen Sie uns:

<li class="top"><a href="#home"><span>⇧</span>Top</a></li> 

Was genau soll es CSS aussehen zu erreichen, was ich brauche?

+0

mögliche Duplikate von [Gibt es eine Möglichkeit zu scrollen, um zu verankern, anstatt mit Javascript (etwas wie glatte Schriftrolle) zu springen]] (http://stackoverflow.com/questions/6451193/is-there-way-to-scroll-to -anchor-eher als jump-with-javascript-something-lik) –

+1

Ich glaube nicht, dass Sie dies in CSS tun können. Es würde wahrscheinlich eine JavaScript-Lösung erfordern. Diese Seite kann meiner Meinung nach helfen. Sehen Sie sich die Demo an und klicken Sie auf den Link "vertikale Bildlaufleiste" unten. Ich denke, das ist es, wonach Sie suchen. http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizontal-page-scrolling-with-jquery/ – jmbertucci

Antwort

0

CSS ist zum Setzen/Ändern der Aussehen Ihrer UI-Elemente, nicht Navigation. Um die Seite "scrollen" zu machen, um im Browser mit CSS sichtbar zu sein, stelle ich mir vor, Sie könnten ein unsichtbares Element im oberen Bereich von oben nach oben erweitern, indem Sie einen zeitgesteuerten Übergang verwenden, um alle unsichtbaren Teile Ihrer Benutzeroberfläche sichtbar zu machen verstecken oder entfernen ... und selbst auf diese Weise bezweifle ich, dass Sie ohne JS dorthin gelangen könnten.