滾動部分隨機滾動

我需要使用onepage滾動部分編碼網站而不使用插件（如fullPage.js）。所以我剛纔創建6個部分，如：滾動部分隨機滾動

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
<script src="hlpjs.js" type="text/javascript"></script> 
<title>My Website</title> 
<link href="hlpcss.css" rel="stylesheet" type="text/css"> 
</head> 

<body> 
    <section id="section1"> 
     <h1>text1</h1> 
    </section> 
    <section id="section2"> 
     <h1>text2</h1> 
    </section> 
    <section id="section3"> 
     <h1>text3</h1> 
    </section> 
    <section id="section4"> 
     <h1>text4</h1> 
    </section> 
    <section id="section5"> 
     <h1>text5</h1> 
    </section> 
    <section id="section6"> 
     <h1>text6</h1> 
    </section> 
</body>

我試圖通過部分這樣一個JavaScript文檔中滾動：

var count = 1; 
$(window).bind('mousewheel DOMMouseScroll', function(event){ 
    if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) { 
     if (count < 6) { 
      count++; 
      $('html, body').animate({ 

        scrollTop: $("#section"+count).offset().top 
      }, 2000); 
     } 
    } else { 
     if(count>1){ 
      count--; 
      $('html, body').animate({ 
        scrollTop: $("#section"+count).offset().top 
      }, 2000); 
     } 
    } 
});

但它不是，它應該工作。它只是隨機滾動，直到它在頂部（或底部），然後停止。

來源

2016-03-30 Ahmet Erbil

可能是因爲你是在彼此的頂部解僱許多動畫。嘗試使用「標誌」僅在當前沒有動畫發生時才允許動畫。您可以通過在$ .animate中使用'complete'回調來完成此操作。文檔：http：//api.jquery.com/animate/。另外，你的櫃檯真的沒有意義。 – caulitomaz

我不確定你想要達到什麼效果，但這裏只是試圖調試你的代碼https://jsfiddle.net/46d0Lnfo/3/這可能會讓你清晰。你的計數邏輯不正確 – Ashish451

@caulitomaz我想向下滾動一個部分或向上滾動一個部分，所以我使用count來訪問前一部分或下一部分的正確ID。那有什麼問題？ –

我刪除了if語句，並添加了完整的回調函數，所以現在可以工作。我唯一的問題是現在我可以無限上下滾動，但如果我嘗試添加任何if語句，動畫根本不起作用（任何建議？）。否則，我要去與：

var count = 1; 
 
$(window).bind('mousewheel DOMMouseScroll', function(event){ 
 
    if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) { 
 
\t \t count--; 
 
     $('html, body').animate({ 
 
        scrollTop: $("#section"+count).offset().top 
 
       }, 1000,function(){ 
 
     $('html, body').clearQueue(); 
 
\t \t \t \t }); 
 
    } 
 
    else { 
 
\t \t count++; 
 
     $('html, body').animate({ 
 
        scrollTop: $("#section"+count).offset().top 
 
       }, 1000,function(){ 
 
     $('html, body').clearQueue(); 
 
\t \t \t \t }); 
 
\t } 
 
});

來源

2016-03-31 19:23:01

滾動部分隨機滾動

回答

相關問題