Scroll sections with viewport JQuery

Question

I'm facing some problem to scroll the HTML sections with the help of viewport jQuery plugin. I have 4 sections on a page, I want to scroll one by one while mouse scrolling (up or down). My HTML and JavaScript code are given below:

<section id="chapter1-block" class="chapter">
<span id="chapter1" class="pointer"></span><span class="pointer-b"></span>
</section>

<section id="chapter2-block" class="chapter">
<span id="chapter2" class="pointer"></span><span class="pointer-b"></span>
</section>

<section id="chapter3-block" class="chapter">
<span id="chapter3" class="pointer"></span><span class="pointer-b"></span>
</section>

<section id="chapter4-block" class="chapter">
<span id="chapter4" class="pointer"></span><span class="pointer-b"></span>
</section>

JS:

$(function () {
    var _top = $(window).scrollTop();
    var _direction;
    var curChapterPos = 'chapter1';
    $(window).scroll(function(){
        var _cur_top = $(window).scrollTop();
        console.log(curChapterPos);
        if(_top < _cur_top)
        {   
            if(curChapterPos == "chapter1")
            {
                $('body').scrollTo( '#chapter2');
                curChapterPos = 'chapter2';
                console.log(_cur_top);
                return false;
            }
            else
            if(curChapterPos == "chapter2")
            {
                $('body').scrollTo( '#chapter2');
                curChapterPos = 'chapter3';
                console.log('3--'+curChapterPos);
                return false;
            }else
            if(curChapterPos == "chapter3")
            {
                $('body').scrollTo( '#chapter3');
                curChapterPos = 'chapter4';
                console.log('3--'+curChapterPos);
                return false;
            }           
            _direction = 'down';
        }
        else
        {
            _direction = 'up';
        }
        _top = _cur_top;
    });
});

Explain what error have you experienced with your current code.. — Nelson, Oct 23 '12 at 14:59
A www.jsfiddle.net would be very helpful if you want direct help with your source code as opposed to more abstract recommendations. — Louis Ricci, Oct 23 '12 at 15:13
Unless you are trying to learn, I would recommend you to take a look at fullpage.js, a library I created to solve the same problem. It will provide you a better end product. Highly tested in multiple devices and OS. Provides high performance using CSS3 transformations with fallbacks to jQuery and much more things such as anchors in the URL, infinite scroll, responsiveness, lazy loading, support for kinetic scrolling... etc — Alvaro, Jan 14 '16 at 13:50

score 0 · Answer 1 · edited May 23 '17 at 12:15

The problem here, is when the page scrolls, the functions is invoked 7 times if you use the scroll bar from the browser. 9 times with the key down. And If you use the mouse wheel the function is invoked between 12 and 25 times. So, the problem could be solved if you avoid the use of the mouse, because the sensibility of the mouse could be different in any client/browser. But this not resolve the original question. Maybe if combine the page scroll with the mouse hover and the visibility of the tag, will result in the answer you need.

Here is my partial solution. It makes a loop if the mouse scroll goes down.

http://jsfiddle.net/manueru_mx/Wm6Pn/

$(function () {
    var _top = $(window).scrollTop();
    $("#xtop").val(0);
    var _direction;
    var curChapterPos = '';
    var _last = false;

    $(window).scroll(function(){
        var _cur_top = $(window).scrollTop();        
        var _top = $("#xtop").val();
        curChapterPos = $("#chapterhidden").val();

        if(_top < _cur_top){            
            if(curChapterPos == "chapter1"){
                $('body').scrollTo( '#chapter2');
                curChapterPos = 'chapter2';
                $("#chapterhidden").val(curChapterPos);
            }else if(curChapterPos == "chapter2"){
                $('body').scrollTo( '#chapter2');
                curChapterPos = 'chapter3';                
                $("#chapterhidden").val(curChapterPos);                
            }else if(curChapterPos == "chapter3"){
                $('body').scrollTo( '#chapter3');                
                curChapterPos = 'chapter4';
                $("#chapterhidden").val(curChapterPos);                
            } else if(curChapterPos == "chapter4" &&  elementInViewport(document.getElementById('chapter3')) == false){                
                console.log("aquisss");
                $('body').scrollTo( '#chapter4');
                curChapterPos = 'chapter4';
                $("#chapterhidden").val(curChapterPos);
                $("#xtop").val(_cur_top+1000);
            }else{
                return false;
            }
            _direction = 'down';            
            $("#xtop").val(_cur_top);

        }else {            
            if(curChapterPos == "chapter4" && elementInViewport(document.getElementById('chapter4-block')) == false){                
                $('body').scrollTo( '#chapter3');
                curChapterPos = 'chapter3';
                $("#chapterhidden").val(curChapterPos);                
            } else if (curChapterPos== "chapter3"){
                $('body').scrollTo( '#chapter2');
                curChapterPos = 'chapter2';
                $("#chapterhidden").val(curChapterPos);
            } else if (curChapterPos== "chapter2"){            
                $('body').scrollTo( '#chapter1');
                curChapterPos = 'chapter1';
                $("#chapterhidden").val(curChapterPos);
            }
            _direction = 'up';
            $("#xtop").val(_cur_top);
        }        
    });
});


function elementInViewport(el) {
  var top = el.offsetTop;
  var left = el.offsetLeft;
  var width = el.offsetWidth;
  var height = el.offsetHeight;

  while(el.offsetParent) {
    el = el.offsetParent;
    top += el.offsetTop;
    left += el.offsetLeft;
  }

  return (
    top >= window.pageYOffset &&
    left >= window.pageXOffset &&
    (top + height) <= (window.pageYOffset + window.innerHeight) &&
    (left + width) <= (window.pageXOffset + window.innerWidth)
  );
}

When you enter the last position, although the direction of travel is up, never enters the condition. So I add 1000 to the end position. This creates the cycle and lets start from the beginning. It is wrong, but i can not find logic in behavior. Interestingly only happens in the last position.

Tested on FF 16 and IE 8 with compatibility view. and works with mouse scroll, key down and browser scroll bar.

Using this plugin would be easier. http://www.appelsiini.net/projects/viewport

But I would not change much your initial approach. I used the library scrollTo because I see you use that function and is not native to jQuery

http://demos.flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js

Hope this help

References: ElementInViewPort function

Scroll sections with viewport JQuery

1 Answers1