Question

如何让jquery动画效果在屏幕滚动到指定位置才执行

描述 ： 我有个长网页，有3屏，都显示在一个页面，点击导航会跳到相对位置（用锚点）
问题： 我第三屏有个jquery动画效果，在一打开网页会自动执行效果， 要如何才能够当点击导航，屏幕滚动到第三屏，动画才执行呢？
请大神们帮下忙~

Answer 1

1、新建一个html文件，命名为test.html。

2、在test.html文件内，使用div标签创建一个模块，并设置其id为mycss。

3、在css标签内，定义div的样式，设置其宽度为100px，高度为2000px，背景颜色为粉红色。

4、在js标签内，使用scroll()方法监听页面的滚动条，并执行function方法。

5、在function方法内，使用if语句判断，当前滚动的位置（scrollTop()）是否到达页面的底部（$(document).height()-$(window).height()），如果到达页面底部，提示“已经到底部了”。

Answer 2

在第二页需要判断滚动方向 意思是在每次滚动完成后都需要记住scrollTop
然后才好判断滚动方向 否则没办法做到向上滚动....

Answer 3

1.CSS属性值是逐渐改变的，这样就可以创建动画效果。因此只有数字值可创建动画，比如margin:30px 而字符串值无法创建动画，比如background-color:red

2.要实现animate滚动到页面指定id的位置，就要获取ID的数字值，也就是距离顶部的距离，再通过animate的scrollTop滚动

$(document).ready(function($){
  $('#comt').click(function(){
    $('html,body').animate({scrollTop:$('#comments').offset().top}, 800);
  });
  $('#xia').click(function(){
    $('html,body').animate({scrollTop:$('#footer').offset().top}, 800);
  });
});

3.点击ID为comt的元素，回到ID为comments的位置；点击ID为xia的元素，回到id为footer的位置。

4.希望你能明白，早日进步哦！

Answer 4

滚动应该使用jquery的动画效果写的吧？但点击导航到第三屏结束的适合可以赋予一个完成后执行的函数，在函数里面添加动画效果，就行，让动画到滚动执行完后在开始执行

Answer 5

滚动应该使用jquery的动画效果写的吧？但点击导航到第三屏结束的适合可以赋予一个完成后执行的函数，在函数里面添加动画效果，就行，让动画到滚动执行完后在开始执行

追问

能详细点吗 、？ 刚接触jquery。。好多不懂

追答

jquery有自己的动画效果方法，像锚点这个可以用animate 改变滚动条坐标，在animate方法里面可以设置滚动结束后才做的动作，