Forum anmelden / register Board
 Search  Calendar  Gallery |  Auctions  Global  Top |  Members  Stats |
 | Admin |
 Chat (0) new User-Map |  send Password  Register |
|---|
| Forum Overview |
Pages: (1) [1] » |
  |
| So scrollen Sie eine HTML-Seite mithilfe des JQuery-Anker-Tags |
| lonipok |   
| |
|---|---|---|
| Group: User Level: Neuling Posts: 2 Joined: 1/9/2024 IP-Address: saved  | In diesem Tutorial wird erklärt, wie Sie mithilfe einer HTML-Seite zu einem bestimmten Anker-Tag scrollen jQuery. In diesem Abschnitt wird gezeigt, wie Sie einen sanften Seiten-Scroll-Effekt erstellen, um zum oberen oder unteren Rand der Webseite zu scrollen jQuery. Im folgenden Beispiel sehen wir zwei Links. Der erste Link heißt „Gehe nach unten“ oben auf der Seite und ein weiterer Link namens „Gehe nach oben“ befindet sich unten auf der Seite. Über beide Links können wir entweder zum oberen oder unteren Rand der Webseite scrollen. JQuery getScript-Beispiel Beispiel für eine JQuery-Bildlaufseite <!doctype html> <head> <title>JQuery Page Scrolling</title> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> </head> <h2>Using JQuery to Create Page Scrolling</h2> <style> div { color:red; background-color:#fcc; } </style> <script type="text/javascript"> $(document).ready(function(){ $("a.scrollToBottom").click(function(){ $("html,body").animate({scrollTop:$(document).height()},300); return false; }); $("a.scrollToTop").click(function(){ $("html,body").animate({scrollTop:0},300); return false; }); }); </script> <body> <div><a href="#mydiv" >Go to Bottom</a></div> <p>jQuery is a JavaScript Library.jQuery greatly simplifies JavaScript programming.jQuery is easy to learn.jQuery is a lightweight, "write less, do more", JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript on your website. jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.</p> <p>jQuery is a JavaScript Library.jQuery greatly simplifies JavaScript programming.jQuery is easy to learn.jQuery is a lightweight, "write less, do more", JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript on your website. jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.</p> <p>jQuery is a JavaScript Library.jQuery greatly simplifies JavaScript programming.jQuery is easy to learn.jQuery is a lightweight, "write less, do more", JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript on your website. jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.</p> <p>jQuery is a JavaScript Library.jQuery greatly simplifies JavaScript programming.jQuery is easy to learn.jQuery is a lightweight, "write less, do more", JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript on your website. jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.</p> <p>jQuery is a JavaScript Library.jQuery greatly simplifies JavaScript programming.jQuery is easy to learn.jQuery is a lightweight, "write less, do more", JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript on your website. jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.</p> <p>jQuery is a JavaScript Library.jQuery greatly simplifies JavaScript programming.jQuery is easy to learn.jQuery is a lightweight, "write less, do more", JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript on your website. jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.</p> <p>jQuery is a JavaScript Library.jQuery greatly simplifies JavaScript programming.jQuery is easy to learn.jQuery is a lightweight, "write less, do more", JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript on your website. jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.</p> <p>jQuery is a JavaScript Library.jQuery greatly simplifies JavaScript programming.jQuery is easy to learn.jQuery is a lightweight, "write less, do more", JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript on your website. jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.</p> <p>jQuery is a JavaScript Library.jQuery greatly simplifies JavaScript programming.jQuery is easy to learn.jQuery is a lightweight, "write less, do more", JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript on your website. jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.</p> <p>jQuery is a JavaScript Library.jQuery greatly simplifies JavaScript programming.jQuery is easy to learn.jQuery is a lightweight, "write less, do more", JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript on your website. jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.</p> <p>jQuery is a JavaScript Library.jQuery greatly simplifies JavaScript programming.jQuery is easy to learn.jQuery is a lightweight, "write less, do more", JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript on your website. jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.</p> <div id="mydiv"><a href="#" >Go to Top</a></div> </body> </html> Wie im obigen Programm gezeigt, haben wir den Code in $(document).ready verwendet, bei dem es sich um ein Ereignis handelt, das ausgelöst wird, wenn das Dokument bereit ist. Es wird ausgeführt, sobald das Seitendokumentobjektmodell für die Ausführung von JavaScript-Code bereit ist. Die Zeile $(„a.scrollToBottom“).click(function()) definiert die Klickfunktion, die ausgeführt wird, wenn auf einen Link mit der Klasse scrollToBottom geklickt wird. Der Code in der Funktion wird ausgeführt. Der Scrolleffekt wird mit der Funktion scrollTop erstellt. Die nächste Zeile scrollt zum Ende der Seite und verwendet dabei die Fensterhöhe, um den unteren Rand zu bestimmen. 300 ms stellt die Geschwindigkeit dar, mit der die Animation ausgeführt wird. Die Zeile $(“a.scrollToTop”).click(function()) definiert die Klickfunktion, wenn die Seite geladen wurde, und verknüpft sie mit der Klasse scrollToTop . $(“html,body”).animate({scrollTop:0},300); Zeile definiert die animate()-Methode, mit der Animationseffekte auf CSS-Eigenschaften erstellt werden können. Die scrollTop-Funktion ist auf 0 gesetzt, was bedeutet, dass sich die Bildlaufleiste ganz oben befindet, und 300 ms stellt die Geschwindigkeit dar, mit der die Animation ausgeführt wird. Beispieldemo für eine JQuery-Bildlaufseite Wenn Sie das obige Beispiel ausführen, erhalten Sie die folgende Ausgabe: Führen Sie die JQuery Scroll Page Demo aus Beispiel für eine JQuery-Bildlaufseite ScrollPagePicture1 | |
| 1/10/2024 5:35:23 PM |     | |
|
| Thread-Info | |
|---|---|
| Access | Moderators |
| Reading: all Writing: User Group: general | Cyberlord, sense100 |
| Forum Overview |
.: Script-Time: 0.218 || SQL-Queries: 6 || Active-Users: 3,361 :.
Powered by ASP-FastBoard HE v0.8, hosted by cyberlord.at