Home >Web Front-end >JS Tutorial >jQuery implements simple scrolling animation effect_jquery

jQuery implements simple scrolling animation effect_jquery

WBOYOriginal: 2016-05-16 15:06:211840browse

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 3499910bf9dac5ae3c52d5ede7383485 elements as buttons. Then add the 3499910bf9dac5ae3c52d5ede7383485 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 bb9345e55eb71822850ff156dfde57c8.
Then introduce jquery and write code:

<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 3499910bf9dac5ae3c52d5ede7383485 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.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Complete example of JS password generation and strength detection (with demo source code download)Next article：Complete example of JS password generation and strength detection (with demo source code download)

See more

jQuery implements simple scrolling animation effect_jquery

Related articles