2017-05-31 7 views
0

私は言葉でこれをどのように記述するかについてあまりよく分かりません。私がしようとしているのは、このウェブサイトが達成したものです。http://sapia.com.pe/スクロールでjqueryまたはjavascriptを使用して特定の場所に移動しますか?

スクロールすると、スクロールアップするときだけでなく、ページの特定のポイントに移動します。 Jqueryを使ってどうすればいいですか?どんなプラグインも必要でしょうか?

+2

のようなプラグインを使用することができますどのようにあなたの基本的な考えを与えるの下SNIPPETをチェック:https://github.com/alvarotrigo/fullPage.js – naslund

答えて

1

それは

を達成することができたり、あなたがリンク先サイトで使用されている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>

関連する問題