Control scrolling on webkit browsers - html

Question

I have a one page website and I need effect like this website. When user scrolls down, it should scroll right to the next page. You can test that effect by opening the second link in chrome and try scrolling up and down. I know there is nothing much but I have tried researching about everything possible and I just cant figure out a way top even start this functionality. I don't need to be spoon fed so just point me into the right direction by providing me a start and I will try and do the rest. Thanks.

Answer 1

Here's my advice: first of all, you need to understand the core functionality. Try debugging the website and searching for the effect's responsible files.
For your start, you should study about HTML5, CSS3 and Accordions. The HTML5 will help you improve the scrolling functions. CSS3 is resposible for the effect. And "accordion" is the name of the effect that scrolls straight to the page from the link you clicked on the menu.
The problem is that working with HTML5, you will find a few cross-browser issues ahead. An easy fix is to use the html5shive.js, that "forces" IE to understand HTML5 tags.
An alternative for this, is using jQuery, that will give you the same effect without trouble. You should look for "jQuery navigation with smooth scroll".
You can also use only accordion, which is way more easy.
There's a left sidebar that allows you to click on the links and leads you to the page with the scrolling effect. That's an accordion, combined with jQuery. If you don't pretend to include a menu with links, you can only use jQuery for the scroll.
Here's a good start for you: jsfiddle.net/7ZVb7/1383/
:)

Answer 2

This is how it is done:
function scrollingBaby(e) {
var t = Math.floor(e.pageY / $(window).height());
e.wheelDeltaY < 0 ? t++ : e.wheelDeltaY > 0 && t--;
var n = $(".winHeight").size();
n--;
t < 0 ? t = 0 : t > n && (t = n);
//alert(t);
console.log($('.moveThis'+t).offset().top);
$("html,body").animate({
//scrollTop: $(window).height() * t
scrollTop: $('.moveThis'+t).offset().top
}, 400, "easeInOutExpo", function () {
setTimeout(function () {
onAnimation = !1
}, 1200)
})
}
var slideActual = 0,
flag = 0,
reveal = 1,
revealPro = 0,
offset = 0,
heightInfo = 0,
widthInfo = 0,
onAnimation = !1;
(function (e) {
var t = navigator.platform.toUpperCase().indexOf("WIN") !== -1;
window.onmousewheel = document.onmousewheel = function (e) {
e = e || window.event;
e.preventDefault && e.preventDefault();
if (onAnimation == 0) {
onAnimation = !0;
scrollingBaby(e)
}
e.returnValue = !1
};
t && IE8JETEMMERDE();
sliderSize();
setTimeout(function () {
checkImageSize()
}, 800);
countMedia(1)
})(jQuery);
Where in, ".winHeight" is the class that is on all the 'pages' or divs that would need to be animated in this way and '.moveThis0', '.moveThis1' etc are the classes that are applied so that we can gather the offset of divs and direct them to top of the page.