The idea of animation is very simple. Click on an element on the page and the page will scroll to the specified position. Here is an introduction to the results of my 3 hours of research on Baidu:
First is the html part:
<html> <body> <a>顶部</a> <a>中部</a> ...<p>持续添加直到出现滚动条</p>... </body> </html>
First add two elements as buttons. Then add the element:
<html> <body> <a href="javascript:;" id="tab1">顶部</a> <a href="javascript:;" id="tab2">中部</a> ...<p>持续添加直到出现滚动条</p>... </body>
href="javascript:;" probably means that the a element can activate js code. If not added, the code will be invalid. No need to add when using
<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>
Note:
1. It is best to write the code below the introduced jquery statement
2. The id must correspond to the element
3. "html,body" represents overall movement
4. ({scrollTop:'600px'},300); The previous value is the moving distance, and the following value is the animation time (unit is milliseconds)
After this step, the code will run.
The following is a detailed analysis of the jquery code:
$(document).ready(function(){
//这一句都要加，不加会出错，没有实际作用
$("#tab1").click(function(){
//$("#tab1")是选择器，click()是方法。意思是说对#tab1使用click方法
$("html,body").animate({scrollTop:'0px'},300);
//我理解的scrollTop是个变量属性，代表元素最顶端和当前浏览器显示区域上边沿之间的距离，所以这句话的意思是：让body的上边沿和浏览器可视区域上边沿距离为0px，结果就是回到页面顶端。
});
...
});
The above is the entire content of this article. I hope it will be helpful to everyone in learning javascript programming.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
