CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Learning
Learning

Reputation: 20011

Scroll page by page using jquery plugin

I am looking for a scroll down page functionality which will scroll down page by page.

I found this plug in but this one is using page section for page scroll

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

I want something which can auto calculate page length and then divide it into pages number of pages if page length/height is greater than screen (Monitor,laptop screen, mobile screen etc..)

Any pointer towards such screen would be create. I am not looking for a complete solution a point or idea how to do it would be fine.

I am working on this example: http://jsfiddle.net/8L5xjf0h/1/

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

Upvotes: 0

Views: 108

Answers (2)

Alvaro
Alvaro

Reputation: 41605

Have you taken a look at fullPage.js using the option scrollOverflow:true ?

Take a look at this example.

You can even consider using a normal scroll by using autoScrolling:false as in this other example. The menu will still scrolling the page to the right section.

Upvotes: 1

hmit
hmit

Reputation: 152

To get the height of your html page you can use $(document).height();

You can then divide this by the view-port's height using $(window).height();. So:

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

This works however currently it is not responsive (adjusting the screen size does not effect the size of the page). This is something you may want to add.

Not sure if this answers your question. If not, feel free to let me know so I can edit it.

Upvotes: 2

Related Questions