如何实现jQuery点击跳到上一屏下一屏

Posted 2023-04-23

HTML主要结构（好几个屏不等高度）：<section id="home"> HOME</section> <section id="about"> ABOUT <div class="btn-box"> <a href="javascript:;" class="prev-section">Previous Section</a> <a href="javascript:;" class="next-section">Next Section</a> </div></section><section id="services"> SERVICE</section> JQ代码，如下，已不工作：<script> $('.next-section').click(function() $('.next-section').click(function() var $this = $(this); $next = $this.parent().next(); $next.scrollTo($next.offset().top, 500, 'linear'); ); $('.prev-section').click(function() var $this = $(this), $prev = $this.parent().prev(); $prev.scrollTo($prev.offset().top, 500, 'linear'););

写两个按钮监听事件，向上每次减屏幕高度，直到为零后设置按钮不可点击。向下每次加屏幕高度，并且获取叶面中有多少section标签，每次向下为全局变量num赋值，若num等于section的数量，则置向下按钮不可点击。 参考技术A 有一个叫fullpage.js的插件 参考技术B 用绝对定位来赋值跳转 参考技术C fullpage.js了解一下？？ 参考技术D 用mar什么什么：auto，就是设置自动那个

如何设置jquery fullpage每一屏的大小

参考技术A 1 把第一页的 <li data-menuanchor="page1" class="active"> 里面的class="active" 去掉 默认一开始就不显示第一个了
2 如果第一页不显示了，在页面初始化的地方 给它加上active这个class属性 就能实现初始化第一页就有动画效果了

3 代码列子：

$.fn.fullpage(

slidesColor: ['#fff', '#fff', '#fff', '#fff', '#fff'],

anchors: ['page1', 'page2', 'page3', 'page4', 'page5'],

menu: '#menu',
afterRender: function()
alert('ok');

); 参考技术B 把第一页的 <li data-menuanchor="page1" class="active"> 里面的class="active" 去掉 默认一开始就不显示第一个了
如果第一页不显示了，在页面初始化的地方 给它加上active这个class属性 就能实现初始化第一页就有动画效果了

afterRender以你的代码给你举个例子

$.fn.fullpage(

slidesColor: ['#fff', '#fff', '#fff', '#fff', '#fff'],

anchors: ['page1', 'page2', 'page3', 'page4', 'page5'],

menu: '#menu',
afterRender: function()
alert('ok');

);

纯手打，有问题欢迎咨询