使用jquery插件逐页滚动

时间:2015-02-01 07:18:50

标签: javascript jquery html css

我正在寻找向下滚动页面功能,该功能将逐页向下滚动。

我找到了这个插件,但是这个插件正在使用页面部分进行页面滚动

http://www.smashingmagazine.com/2014/08/25/how-i-built-the-one-page-scroll-plugin/

如果页面长度/高度大于屏幕(显示器,笔记本电脑屏幕,手机屏幕等),我想要一些可以自动计算页面长度,然后将其分成页面页数的东西。

任何指向此类屏幕的指针都将被创建。我不是在寻找一个完整的解决方案,如何做到这一点或者想法会很好。

我正在研究这个例子:http://jsfiddle.net/8L5xjf0h/1/

<div class="scroll-pointer">&#8659;</div>

2 个答案:

答案 0 :(得分:1)

要获得html页面的高度,您可以使用$(document).height();

然后,您可以使用$(window).height();将其除以视口的高度。所以:

var viewHeight    = $(window).height();
var pageHeight    = $(document).height();
var numberOfPages = pageHeight/viewHeight;
var goToPage = function(page){
    window.scrollTo(0, (page-1)*viewport);
}

但这有效但目前它没有响应(调整屏幕大小不会影响页面的大小)。这是您可能想要添加的内容。

不确定这是否能回答您的问题。如果没有,请随时告诉我,以便我可以编辑它。

答案 1 :(得分:1)

您是否使用scrollOverflow:true选项查看了fullPage.js

看看this example

您甚至可以考虑使用this other example中的autoScrolling:false来使用普通滚动。菜单仍然会将页面滚动到右侧部分。