jQuery的上下滾動的

我創建了一個DIV元素下方jQuery的上下滾動的

#myDiv nav { 
position: relative; 
display: block; 
height: 315px; 
overflow: hidden; 
margin: 60px 0 0 0; 
}

樣式表一個div現在有UL的名單>在它LI元素，可以是任何的高度，我創建兩個按鈕向上和向下瀏覽這個「#myDiv導航」和jQuery是低於

jQuery(document).ready(function(){ 

    var scrollh = 0 
    var scrollv = 0 

    jQuery(".up_nav").on("click" ,function(){ 
     scrollv = scrollv + jQuery('#myDiv nav').innerHeight() 
     jQuery('#myDiv nav').stop(true, false).animate({ 
      scrollTop: (jQuery('#myDiv nav').offset().top - scrollv) 
     },500); 
    }); 

    jQuery(".down_nav").on("click" ,function(){ 
     scrollh = scrollh + jQuery('#myDiv nav').innerHeight() 
     jQuery('#myDiv nav').stop(true, false).animate({ 
      scrollTop: scrollh 
     },500); 
    }); 
});

問題

前幾對UP點擊和DOWN作品WEL l與我一起，但在這幾次點擊之後，滾動變爲極端UP或極端DOWN。

我希望這是一個正常的行爲，根據駐留在「#myDiv nav」中的UL元素的高度以小步驟上下滾動。

編輯

我上傳我的問題的工作版本到的jsfiddle網站 Link to JSFIDDLE，你會點擊向上或向下鍵幾次後發現的問題。

我明白我的jQuery邏輯有一個缺陷，但我無法理解它。

來源

2015-02-06 NMindz

這將會是盛大的，如果你能包括的jsfiddle，使人們可以看到在行動的問題！ – Codeman 2015-02-06 18:11:11

我在您的請求中添加了jsfiddle鏈接 – NMindz 2015-02-06 18:37:19

我沒有看到您的小提琴的問題。 – Timmerz 2015-02-06 19:12:15

這將是更接近您要查找的內容一點。它是用頁面的概念實現的。

http://jsfiddle.net/ue94jj60/6/

var Grid = function() { 
    var self = this; 

    var page = 1, 
     nav = null; 

    this.init = function() { 
     nav = $('#myDiv nav'); 

     $(".up_nav").on("click", function() { 
      self.scroll(page - 1); 
     }); 

     $(".down_nav").on("click", function() { 
      self.scroll(page + 1); 
     }); 
    }; 

    this.pages = function() { 
     return Math.round(nav[0].scrollHeight/nav.innerHeight()); 
    }; 

    this.scroll = function (p) { 
     if (p < 1 || p > this.pages()) { 
      return; 
     } 

     page = p; 

     nav.stop(true, false).animate({ 
      scrollTop: (page - 1) * nav.innerHeight() 
     }, 500); 
    }; 

    $(this.init); 
}; 

var grid = new Grid();

你也可以把它的滾動編程：

grid.scroll(3);

來源

2015-02-06 19:49:12 Timmerz

這是一個完美的解決方案和正確的方法，我希望我可以讚揚你的答案，但你做了很大的工作來幫助我在這裏 – NMindz 2015-02-06 23:49:00

您可以

ul { 
    position: absolute; 
    top: 0px; 
    transition: top 0.5s; 
}

，並點擊按鈕後，接下來的只是改變UL頂部的風格。

檢查例如：

http://jsfiddle.net/DariuszMusielak/oxgbyk6b/1/< ----修訂

UPDATE V2 http://jsfiddle.net/DariuszMusielak/jrtfrgo2/

來源

2015-02-06 18:23:11 Muszla

您工作中的問題是，隨着您繼續單擊向下按鈕，它將無限數減少。請看看我的jsfiddle鏈接，看看我是怎麼做的以及出了什麼問題 – NMindz 2015-02-06 18:44:16

這不是問題。您可以一直將滾動的邊距設置爲減小。 – Muszla 2015-02-06 18:53:55

我爲您更新了我的代碼示例。檢查它 – Muszla 2015-02-06 19:00:00

jQuery的上下滾動的

回答

相關問題