滚动到jQuery或JavaScript的具体位置？ [英] On scroll take to specific location with jquery or javascript?

问题描述

我不太确定如何用文字描述这一点;但我打算做的事情就像这个网站所取得的成就一样： http://sapia.com.pe/

当您向下滚动时，会将您带到页面的特定位置以及向上滚动。我如何使用JQuery来做到这一点？是否需要任何插件？

解决方案

检查下面的 SNIPPET 可以实现

或者您可以使用像 fullpage

a>

var arr = ['_a'，'_ b'，' _c']; var i = 0; var doing = false; $（window）.bind（'mousewheel'，function（e）{if（e.originalEvent.wheelDelta> 0）{if（i == - 1） top（），600），function（）（）;} if（！doing）{$（'html，body'）。animate {{scrollTop：$（＃+ arr [i - ]）。offset {doing = false;}）; doing = true;}} else {if（i == 3）i = 0; if（！doing）{$（'html，body'）。animat e（{scrollTop：$（＃+ arr [i ++]）。offset（）。top}，600，function（）{doing = false;}）;做= TRUE; }}}）;

body {overflow：hidden;} .section，html，body {width：100％; height：100％;}。{background-color：red; } .b {background-color：yellow; } .c {background-color：blue; }

 < script src =https：// ajax .googleapis.com / ajax / libs / jquery / 2.1.1 / jquery.min.js>< / script>< div id =_ aclass =section a>< / div>< ; div id =_ bclass =section b>< / div>< div id =_ cclass =section c>< / div> 




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 you to a specific point of the page, as well as when you scroll up. How could I do this using Jquery? Would any plugins be needed?

解决方案

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; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="_a" class="section a"></div>
<div id="_b" class="section b"></div>
<div id="_c" class="section c"></div>

这篇关于滚动到jQuery或JavaScript的具体位置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！