Die Idee der Animation ist sehr einfach. Klicken Sie auf ein Element auf der Seite und die Seite scrollt zur angegebenen Position. Hier ist eine Einführung in die Ergebnisse meiner dreistündigen Recherche zu Baidu:
Zuerst ist der HTML-Teil:
<html> <body> <a>顶部</a> <a>中部</a> ...<p>持续添加直到出现滚动条</p>... </body> </html>
Fügen Sie zunächst zwei -Elemente als Schaltflächen hinzu. Fügen Sie dann das Element hinzu:
<html> <body> <a href="javascript:;" id="tab1">顶部</a> <a href="javascript:;" id="tab2">中部</a> ...<p>持续添加直到出现滚动条</p>... </body>
href="javascript:;" bedeutet wahrscheinlich, dass das a-Element js-Code aktivieren kann. Wenn er nicht hinzugefügt wird, ist der Code ungültig. Bei Verwendung von
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){
$("#tab1").click(function(){
$("html,body").animate({scrollTop:'0px'},300);
});
$("#tab2").click(function(){
$("html,body").animate({scrollTop:'600px'},300);
});
});
</script>
Hinweis:
1. Am besten schreiben Sie den Code unter die eingeführte JQuery-Anweisung
2. Die ID muss dem -Element entsprechen
3. „html,body“ steht für die Gesamtbewegung4. ({scrollTop:'600px'},300) Der vorherige Wert ist die Bewegungsdistanz und der folgende Wert ist die Animationszeit (Einheit ist Millisekunden)
Nach diesem Schritt wird der Code ausgeführt.
Das Folgende ist eine detaillierte Analyse des JQuery-Codes:
$(document).ready(function(){
//这一句都要加，不加会出错，没有实际作用
$("#tab1").click(function(){
//$("#tab1")是选择器，click()是方法。意思是说对#tab1使用click方法
$("html,body").animate({scrollTop:'0px'},300);
//我理解的scrollTop是个变量属性，代表元素最顶端和当前浏览器显示区域上边沿之间的距离，所以这句话的意思是：让body的上边沿和浏览器可视区域上边沿距离为0px，结果就是回到页面顶端。
});
...
});
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
