Skip to content Skip to sidebar Skip to footer

On Scroll Take To Specific Location With Jquery Or Javascript?

I'm not too sure how to describe this with words; but what I am planning to do is something like what this website has achieved: http://sapia.com.pe/ When you scroll down, it takes

Solution 1:

Check the SNIPPET below it will give you basic idea how it can be achieved

or you can use plugins like fullpage

var arr = ['_a','_b','_c'];
var i=0;
var doing=false;
$(window).bind('mousewheel', function(e){
        if(e.originalEvent.wheelDelta > 0) {
            if(i==-1) i=2;
            if(!doing){
             $('html, body').animate({
                  scrollTop: $("#"+arr[i--]).offset().top
              }, 600,function(){doing=false;});
             doing=true;
           }
        }
        else{
             if(i==3) i=0;
            if(!doing){
             $('html, body').animate({
                  scrollTop: $("#"+arr[i++]).offset().top
              }, 600,function(){doing=false;});
             doing=true;
           }
        }
 });
body{
    overflow: hidden;
}
.section,html,body{
  width:100%;
  height:100%;
}
.a{ background-color:red; }
.b{ background-color:yellow; }
.c{ background-color:blue; }
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="_a"class="section a"></div><divid="_b"class="section b"></div><divid="_c"class="section c"></div>

Post a Comment for "On Scroll Take To Specific Location With Jquery Or Javascript?"